Emberjs + Handlebars + Object onchange and events



我发现jQuery观察器没有绑定到未显示在handlebars逻辑中的元素。

假设我有以下内容;

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please <a class="login">log in</a>.
{{/if}}
<script>
$('.login').click(function() {
    alert("Hi there.");
});
</script>

如果我在控制台中运行,person=null(或者说服那个人是空的所需的任何东西)-登录观察器不起作用。我已经在使用embers didInsertElement()来加载其他一些东西,但是否有一个"onChange"事件可以挂接,以便重新绑定事件观察者?

最大的问题是为什么要这样?Ember对点击处理程序提供了出色的内置支持,而无需通过jQuery。<script>不起作用的原因可能是ember将视图插入DOM的延迟方式。执行Ember.View.append()时,稍后会将元素插入DOM中。

也就是说,这里有一个fiddle,它可以执行我认为您希望在didInsertElement()中附加jQuery单击处理程序的操作。

http://jsfiddle.net/algesten/5LPPz/1/

didInsertElement: function () {
    // appending click handler directly with jQuery
    $('.login').click(function() {
        alert("Hi there.");
    });
}

然而,ember的方法是只使用click隐式处理程序函数:

http://jsfiddle.net/algesten/5LPPz/2/

click: function () {
    alert("Hi there.");
}

注意:后一个操纵器连接到周围的把手div,而不是a,但单击气泡。

您面临的问题是javascript只能绑定到dom中存在的元素。添加新元素后,它希望您重新绑定这些事件。幸运的是,jQuery是您的朋友。

<script>
$('body').on('click', '.login', function() {
    alert("Hi there.");
});
</script>

理想情况下,您的选择器是最接近.login的父级,而不是由javascript添加的。如果您不确定

,以上是安全的选择

最新更新