Meteor模板数据对象可防止javascript事件触发

Meteor template data object prevents javascript events from firing?

本文关键字：javascript 事件 可防止 对象 数据 Meteor      更新时间：2024-05-20

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

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

奇怪的是，当我在没有任何数据对象作为参数的情况下渲染模板时，可以触发点击事件，但一旦我将数据对象传递到模板中，新附加的模板中的所有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>

这应该会将当前@呈现到模板中。

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

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

为了调试，我会把它分解成这样的东西（对不起，我的非Coffee Script语法，我要用纯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));

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

相关文章：