Meteor 模板数据对象阻止 javascript 事件触发？答案

【问题标题】：Meteor template data object prevents javascript events from firing?Meteor 模板数据对象阻止 javascript 事件触发？
【发布时间】：2013-12-25 09:14:41
【问题描述】：

我在 Meteor 中遇到了一个非常奇怪的问题...

我有一个渲染模板并将其附加到 div 的函数，在添加的模板内有一个可以触发侦听器事件的按钮。

奇怪的是，当我在没有任何数据对象作为参数的情况下渲染模板时，可以触发 click 事件，但是一旦我将数据对象传入模板，新附加模板中的所有 javascript 都会停止工作。 .

理想情况下，我希望能够将数据传递给模板并正确触发事件，有人知道这里到底发生了什么吗？非常感谢！

向模板传入数据失败场景：

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>

没有数据对象传递的成功场景：

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>

【问题讨论】：

标签： javascript jquery templates coffeescript meteor

【解决方案1】：

这应该将当前@渲染到模板中。

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

【讨论】：

【解决方案2】：

这看起来很乱： element.append Meteor.render Template.detail

为了调试，我会把它分解成类似的东西（请原谅我的非咖啡脚本语法，我正在用纯 JS 上老学校）：

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

然后使用大量的 console.log() 语句来找出未命中匹配发生的位置。即

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

顺便说一句 - 你的例子没有显示房间模板，所以假设它很简单。

【讨论】：