何时（或如何）使用RactiveJS设置jQuery事件处理程序？

Question

我有一个正常的客户端应用程序，主要用jQuery编写。我在一个特定页面上使用Ractive，它非常有用。但是，所有旧的jQuery事件都不再附加，大概是因为在Ractive被引用后DOM已经被重新渲染。我尝试在Ractive渲染后设置事件，但这导致了一些奇怪的行为，丢失了DOM元素和东西。我可以在哪里设置那些旧的jQuery处理程序，或者可能吗？ Ractive渲染是异步发生的吗？如果是，是否有我应该听的事件？

我已经试过

$('.button').click(someHandler); // <--- Here 

getData(function(data){ 
    ractive = new Ractive({ 
     el: '.content', 
     template: template, 
     data: data 
    }); 
}); 

和

getData(function(data){ 
    ractive = new Ractive({ 
     el: '.content', 
     template: template, 
     data: data 
    }); 
    $('.button').click(someHandler); // <--- Also here 
}); 

Answer 1

Ractive同步呈现，让你的第二个例子，就可以（但第一个肯定不会） - 除非.button元素你”重新定位在未呈现的部分内：

{{#someCondition}} 
    <button class='button'>click me</button> 
{{/someCondition}} 

在th例如，如果someCondition是虚假的，那么jQuery将不会有DOM元素进行定位。

更惯用的方式来做到这一点与Ractive会是这样：

模板：

{{#someCondition}} 
    <button on-click='doSomething'>click me</button> 
{{/someCondition}} 

代码：

ractive = new Ractive({...}); 
ractive.on('doSomething', someHandler); 

这样的话，你永远需要担心元素是否被渲染。

（请记住，虽然该处理器将需要改变 - this意味着ractive实例，并传递给处理程序的event对象是Ractive事件，而不是一个原生DOM事件 - 让本机事件中使用event.original。 ）

如果.button元素应该被正在呈现直线距离（即它不是一个falsy部分），和jQuery 仍然无法找到它最初的渲染之后，那么就意味着你已经找到了有趣的bug ... let us know!

Answer 2

超越里奇的建议，使用Ractive的事件处理（这是行最有做事情的Ractive的方式），你也可以使用完整的选项：

ractive = new Ractive({ 
    el: '.content', 
    template: template, 
    data: data, 
    complete: function(){ 
     $('.button').click(...) 

     // or better, use ractive's selector 
     // to limit search to the template. 
     // You could use this outside of `complete` 
     // as well. 
     $(this.find('.button')).click(...) 
    } 
}); 

不是鱼周围的元素，你可以声明使用装饰知道什么时候元素创建（和销毁），并传递给它一个参考。在您的模板：

<button decorator='initbutton'/> 

然后在代码：

ractive = new Ractive({ 
    el: '.content', 
    template: template, 
    data: data, 
    decorators: { 
     initbutton: function(node){ 
      var $button = $(node) 
      $button.on('click', ...) 

      return { teardown: function(){ 
       //if you need to do anything to teardown... 
       $button.off('click', ...) 
      } 
     } 
    } 
});