2017-02-21 5 views
0

一度発射し、私はこの単純なViewModelにしている:ノックアウトafterRenderだけ

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> 

問題が結合foreachafterRenderイベントが唯一であるということです一度起動すると、明らかにko.applyBindingsの後にDOMがまだ準備されていないので、jQuery.uiをドラッグすることはできません。

Koの文書によれば、observableArray(対応するforeachに属する)が変更されるたびに起きることはありませんが、それは起こらないでしょう。afterRender

結局私は、配列を移入した後、私はそれがajax.doneにドラッグを初期化することにより、作業しまったが、それはそれを行うには正しい方法ではありません、そしてそれにもかかわらず、問題がまだ存在する、afterRenderは、アレイの更新に発射ないように私は感じます。

アイデアをいただければ幸いです。

PS:私は明らかに意味のアレイではko.observableArray

答えて

1

問題が

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

afterRenderがパラメータとしての機能を期待し、あなたの中にある、しかし、あなたは、パラメータ、変更などのデータとそれを呼び出すことで機能を呼び出していますそれへ:

foreach: {arr, afterRender: initPlugins } 

afterRender方法はノックアウトで2つのパラメータで呼び出されます:

挿入されたDOM要素の配列、それらにバインドされているデータ項目

+0

ありがとう、それは動作します! afterRenderの内部でViewModelにアクセスできるきれいな方法はありますか? –

関連する問題