2

foreach を使用して大きなセクションを繰り返しているページがあります。

<div class="module-wrapper" 
  data-bind="template: { name: 'dependent-template', foreach: dependentInformation }">    
</div>

これらのセクションでロジックを設定しており、モデル値が変更されたときに jquery (addClass()) を実行する必要があります。しかし、現在のモデルのバインドされた DOM 要素のハンドルを取得する方法がわかりません。

誰もこれを知っていますか？

アップデート

afterRender について読んだときに、現在使用している afterAdd を見ました。

<div class="module-wrapper" 
       data-bind="template: { 
         name: 'dependent-template', 
         foreach: dependentInformation, 
         afterAdd: setClassFromModelState }">
</div>

これは、私が望んでいたほどきれいではありませんでした。これは、dependentInformation 配列に項目が 2 つしかないにもかかわらず、各項目 (テキスト、DOM オブジェクト、コメント、および別のテキスト) に対して afterAdd() が 4 回呼び出されるためです。

そのため、要素を検査して、実際に必要なことをいつ実行するかを知る必要があります。

self.setClassFromModelState = function(element, index, data){
    if ($(element).hasClass("cat") && $(element).hasClass("form-group")) {
        $(element)
            .removeClass("off")
            .removeClass("summary")
            .removeClass("edit")
            .addClass(data.model_state());
    }
};

これを行うには、よりクリーンな方法が必要ですが、これは機能しています...

別のアップデート

私が望むことをするためにノードタイプをチェックする必要があることをここで読んでください：

self.setClassFromModelState = function(element, index, data){
   if (element.nodeType === 1) {
        $(element)
           .removeClass("off")
           .removeClass("summary")
           .removeClass("edit")
           .addClass(data.model_state());
   }
};

http://jsfiddle.net/rniemeyer/awCRM/2/

4

3 に答える 3

0

foreach バインディングのafterRenderイベントにより、生成された dom にアクセスできます。

afterRender — foreach ブロックが複製され、ドキュメントに挿入されるたびに呼び出されます。これは、foreach が最初に初期化されるときと、関連付けられた配列に後で新しいエントリが追加されるときの両方です。Knockout は、コールバックに次のパラメーターを提供します。

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

お役に立てば幸いです。

于 2013-05-21T16:43:43.837 に答える