何時（或如何）使用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', ...) 
      } 
     } 
    } 
});