Angular style declarative Blaze html events

packages
1

I don’t know about you guys, but I’ve been sorely missing being able to hook into an event from my template like in angular

//template
<button ng-click='{{doSomething(this)}}'/>
//js
function doSomething(context) {
    var stuff = context.stuff;  // <-- got it
}

With blaze, we have to do this:

//template
<button id='uniqueElem' data-id='...' />
//js
'click #uniqueElem': function (e, t) {
    e.preventDefault();
    var id = $(e.target).data('parameters');
    var stuff = db.collection.findOne(id); // <-- got it
}

Secretly, I think this is why everyone is moving to react.

But I found a package that is moving in the right direction:


which allows me to do this:

//template
<button onclick="{{doSomething}}" data-id='...'>

//js
'doSomething': function (e,t) {
    var id = $(e.target).data('parameters');
    var stuff = db.collection.findOne(id); // <-- got it
}
// and hopefully soon, this
//template
<button onclick="{{doSomething id}}">

//js
'doSomething': function (e,t, id) {
    var stuff = db.collection.findOne(id); // <-- got it
}

Does anyone get as excited as I do when reading the above? How do you guys do it?

Give.

2 Likes
2

Guys, this s**t is cool. Writing blaze angular style is now possible. If you haven’t migrated to react yet, this is a awesome little package to clean up your html/js:

//template
.btn.btn-default(onclick="doSomething this.id currentUser 'foo'") Click me // <-- did I just pass in a object, global template helper, static string?

//js
Template.events({
    'doSomething': function(event, template, id, user, paramX) {
        // did I just declaratively CALL a function with onClick and PASS parameters into it from the template?
        // That was a rhetorical question, don't answer it. ;)
    }
});

It works, check it out!

2 Likes