Meteor template data object prevents javascript events from firing?

Question

I ran into a very strange issue in Meteor...

I have a function that renders a template and append it to a div, inside the added template there's a button that can trigger listener events.

The strange thing is the click event can be triggered when I render the template without any data object as argument, but as soon as I pass in a data object into the template, all javascript within the newly appended template stop working...

Ideally I want to be able to pass in data to the template and have the events fire correctly, does anyone know what's exactly going on here? Thanks a lot!

Failure Scenario with passing in data to template:

client.coffee

Template.detail.events {
    'click .ol_self_help_btn': (event) ->
        alert 'event fired' //This is never triggered
}

Template.room.events {
    'click .ol_detail': (event) ->
        element = $(event.currentTarget).closest('.ol_property')            
        element.append Meteor.render Template.detail @ //Passing in "this" data object to the template 
}

detail.html

<Template name="detail">
    <div class="row ol_detail_panel">
<button style='button' class='ol_self_help_btn'>Click Me</button> //The button that the event is attached to
        </div>
    </div>
</Template>

Success Scenario without data object passing:

client.coffee

Template.detail.events {
    'click .ol_self_help_btn': (event) ->
        alert 'event fired' //This is triggered when clicking on the button
}

Template.room.events {
    'click .ol_detail': (event) ->
        element = $(event.currentTarget).closest('.ol_property')          
        element.append Meteor.render Template.detail //NOT Passing in data to the template     function
}

detail.html

<Template name="detail">
    <div class="row ol_detail_panel">
          <button style='button' class='ol_self_help_btn'>Click Me</button> //The button that the event is attached to
        </div>
    </div>
</Template>

Answer 1

This looks messy: element.append Meteor.render Template.detail

To debug I would break it up into something like (excuse my non-Coffee Script syntax, I'm going old school with pure JS):

var my_render = Meteor.render(Template.detail);
element.append(my_render);

Then use lots of console.log() statements to figure out where the miss match is happening. ie

console.log("my_render: " + my_render); 
console.log("element.append(my_render): " + element.append(my_render)); 

btw - your example doesn't show the room template, so assuming it's pretty simple.

Answer 2

This should render the current @ into the template.

Template.room.events 
  'click .ol_detail': (event) ->
    element = $(event.currentTarget).closest('.ol_property')
    template = Template.detail @         
    element.append Meteor.render(template)