Ractive上的變化使停止的jQuery了slideDown

Question

我使用Ractive渲染消息列表，就像這樣：

   <ul class="collapsible"> 
        {{#each messages}} 
        <li> 
         <div class="collapsible-header" on-click="readNotification">{{#if read}}<span>{{title}}</span>{{else}}<strong>{{title}}</strong>{{/if}}</div> 
         <div class="collapsible-body"> 
          <p>{{body}}</p> 
         </div> 
        </li> 
        {{/each}} 
       </ul> 

沒問題的，但點擊列表中的項目時，它需要滑開，我將設置消息爲已讀。這會觸發Ractive重新呈現該節點以防止其打開。

這最好的處理方式是什麼？

編輯： 在ractive的數據由該回調，偵聽從火力地堡的child_changed事件更新。然後我將更新的對象設置爲它在索引對象中的索引位置。 ractive可能將此視爲新對象而不是更新的對象？

this.firebase.child(collectionKey).on('child_changed', function(snapshot) { 
     var collectionKey = snapshot.ref().parent().key(); 
     var obj = snapshot.val(); 
     var key = snapshot.key(); 
     var index = app.ractive.get(collectionKey).map(function(item) { 
      return item._firebaseKey; 
     }).indexOf(key); 
     app.ractive.set(collectionKey+'.'+index, obj); 
    }); 

Answer 1

我幾天前通過創建一個合適的「裝飾者」解決了這個問題。我發現裝飾器實現比通過列出來改變Ractive中的事件來在DOM上發射jQuery代碼更可靠。

裝飾很容易創建，檢查出：http://docs.ractivejs.org/latest/writing-decorator-plugins