Setting simple events in meteor

Question

I'm trying out Leaderboard's example in Meteor but i'm doing something wrong in setting the click event. In this example, I have three buttons, one to change the sort by column, another to add 5 bonus points to everyone.

Here's the html:

    <div id="outer">
    {{> sorter}}
    {{> leaderboard}}
  </div>
   <template name="sorter">
   <span>Sorted by {{sortedBy}}</span>
   {{#if sortByName}}
    <input type="button" id="sortScore" value="sort by score" />
  {{else}}
    <input type="button" id="sortName" value="sort by name" />
  {{/if}}

    <input type="button" class="incAll" value="5 bonus points to all" />

</template>

And here's the js:

Template.sorter.events = {
'click #sortName': function(){
    Session.set('orderby', 'name');
},
'click #sortScore': function(){
    Session.set('orderby', 'score');
},
'click input.incAll': function(){
  Players.find().forEach(function(player){
      Players.update(player._id, {$inc: {score: 5}});
  });
}

}

Calling Session.set('orderby', 'name'); in the console works and updates the html accordingly but clicking in the buttons doesn't. So what am I missing?

Thanks

Answer 1

Event maps with selectors won't match top-level elements in a template. This is something we will fix ASAP.

There's an easy workaround though. Wrap your sorter template in a <div>.

http://docs.meteor.com/#eventmaps