淘汰賽AfterRender階段只觸發一次

Question

我有這個簡單的視圖模型：

export class ViewModel { 
    public arr : KnockoutObservableArray<Dtos>; 
    constructor() { 
     this.arr = ko.observableArray<Dtos>(null); 
     ko.applyBindings(this); 
     this.init(); 
    } 

    private init() { 
     var self = this; 
     ajaxCall().done(item => { 
       self.arr(item.Dtos);     
      }); 
    } 

    public initPlugins() { 
     jQuery(".external-events > li") 
      .each(function() { 
       if ($(this).attr("event-draggable") == "false") 
        return true; 
       jQuery(this).draggable({ 
       zIndex: 999, 
       revert: true, // will cause the event to go back to its 
       revertDuration: 0 // original position after the drag 
      }); 
     }); 
    } 
} 

此VM是越來越應用到這個標記：

<ul class="external-events" data-bind="foreach: {arr, afterRender: initPlugins($data)}"> 
    <li event-draggable="false"> 
     <div class="bg-info"> 
      <span data-bind="text: Name"></span> 
     </div> 
     <ul class="external-events" data-bind="foreach: moreStuff"> 
      <li> 
       <div class="bg-info"> 
        <span data-bind="text: Name"></span> 
       </div> 
      </li> 
     </ul> 
    </li> 
</ul> 

的問題是，foreach的afterRender事件綁定只被解僱一次，顯然是在ko.applyBindings之後，但是DOM尚未準備好，所以我們無法初始化爲可拖動的jQuery.ui。

根據Ko文檔，afterRender應該在每次observableArray（屬於相應的foreach）都會發生變化，但不會發生。

最終我通過在填充數組後初始化可拖動的ajax.done來工作，但我覺得它不是正確的方法，但仍然存在問題，afterRender未能更新陣列。

任何想法將不勝感激。

PS：通過數組我明明是說ko.observableArray

Answer 1

的問題是在你的

foreach: {arr, afterRender: initPlugins($data)} 

afterRender需要一個功能參數，但通過與數據作爲參數，改變調用它調用的函數它來：

foreach: {arr, afterRender: initPlugins } 

afterRender方法將2個參數由擊倒可以稱爲：

插入的DOM元素的數組，數據項對它們的約束