Meteor Template Events

Question

I'm trying to get a hold of meteor still so there might be an easy answer to this and i'm hoping that is the case. I have this function which works and returns the correct id when my button is clicked.

$(document).ready(function(){
$("button").click(function(){
    var selection = (this.id);
    boardSpecs[0] = selection;
        return boardSpecs;
    });
});

I want to make this into a meteor click event, something like this.

Template.selectBoard.events({
'click button' : function (event) {
    event.preventDefault();
    var boardType = event.target.id;
    Session.set('boardType', boardType);
    alert(boardType);
    }
});

This is the template where the button exists.

<template name = "selectBoard">
<div class = "container">
    <div class = "boardCarousel">
        {{#each boardList}}
                <div class = "span1">
                    <div class = "thumbnail">
                        <img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
                        <div class = "something">
                            <h2>{{name}}</h2>
                            <p>{{description}}</p>
                            <button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
                        </div>
                    </div>
                </div>
        {{/each}}
    </div>
</div>

Answer 1

Assuming that the button is part of your template, you're code is nearly right. The only different is that this won't point to your button, so you'll need to get it from the event:

Template.selectBoard.events({
'click button' : function (event) {
    event.preventDefault();
    var boardType = event.target.id;
    Session.set('boardType', boardType);
    alert(boardType);
    }
});

Answer 2

Let's make this easier. Your button is defined as:

<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>

And your event handler is trying to get at the id of the button which is {{id}}.

If you use nested templates as follows:

<template name = "selectBoard">
  <div class = "container">
    <div class = "boardCarousel">
      {{#each boardList}}
        {{> board}}
      {{/each}}
    </div>
  </div>
</template>

<template name="board">
  <div class = "span1">
    <div class = "thumbnail">
      <img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
      <div class = "something">
        <h2>{{name}}</h2>
        <p>{{description}}</p>
        <button type = "button" class = "btn btn-primary">Select</button>
      </div>
    </div>
  </div>
</template>

Then this in your event handler will be the data context of the individual board and you can simply write:

Template.selectBoard.events({
  'click button' : function (event) {
    event.preventDefault();
    var boardType = this.id;
    Session.set('boardType', boardType);
    alert(boardType);
  }
});

I'd argue that this is more Meteoric (to borrow an adjective from Python). I'd also avoid using the variable name id because of the potential confusion with the natural MongoDB document identifier _id.

Answer 3

I ended up using a body event and it worked right away. Not sure why but it did.

Template.body.events({
'click #selected' : function(event){
    event.preventDefault();
    Session.set('board',event.target.id);
    }
});