ノックアウトコンポーネントにラップされたタグの無限ループ

Question

Doyadのproposalに基づいて、tag-itをラップするノックアウトカスタムバインディングを作成しました。最終的なコード（簡略化）がある：

ko.bindingHandlers.tagit = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var bind = function() { 
      valueAccessor().tagsList($(element).tagit("assignedTags")); 
     }; 

     var options = $.extend({ 
      afterTagAdded: bind, 
      afterTagRemoved: bind 
     }, valueAccessor().options || {}); 

     // Create tags editor 
     $(element).tagit(options); 

     ////// Block 1 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var tags = value.tagsList(); 
     for(var x = 0; x < tags.length; x++) { 
      $(element).tagit("createTag", tags[x]); 
     } 
     ////// End Block 1 
    }, 
    ////// Block 2 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var tags = value.tagsList(); 
     $(element).tagit("removeAll"); 
     for(var x = 0; x < tags.length; x++) { 
      $(element).tagit("createTag", tags[x]); 
     } 
    } 
    ////// End Block 2 
}; 

対応するHTMLである：

<div data-bind="with: currentDocument"> 
    <input data-bind="tagit: {tagsList: tags}"></input> 
</div> 

私の問題：私は「ブロック1」を使用し、「ブロック2」を削除する必要があり、さもなければコンポーネントは無限に入りますループ。 ブロック2がなければ、tag-itはドキュメント（currentDocumentの変更）を変更するたびにタグを表示し、問題なくタグを手動で編集することができます。代わりに、プログラムでcurrentDocument.tagsを変更すると、変更は可視化されません（明らかに）。 ブロック1を削除してブロック2を追加すると、afterTagAddedコールバックが追加されたすべてのタグに対して呼び出され、タグ配列が変更され、更新関数が呼び出されます。

どのように問題を解決すればよいですか？私はafterTagAddedとafterTagRemovedコールバックが$（element）.tagit（ "createTag"、tags [x]）ではな​​く手動での変更に対してのみ起動すると思います。問題は解決する可能性があります。 ご協力いただきありがとうございます！

Answer 1

解決策は単純ではありませんが、エレガントではありません。タグエディタの読み込みによって変更が発生した場合、trueに設定されている「読み込み中」変数を定義しました。 trueの場合、観測可能な更新がブロックされます。 （前のコードでブロック1を削除してブロック2を追加してください）。

SOの問題を説明しようとすると、いつものように解決策を見つけるのに役立ちます。これもありがとう！

ko.bindingHandlers.tagit = { 
    loading: false, 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var bind = function() { 
      if(ko.bindingHandlers.tagit.loading) return; 
      valueAccessor().tagsList($(element).tagit("assignedTags")); 
     }; 
     ... 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     // Load data 
     ko.bindingHandlers.tagit.loading = true; 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var tags = value.tagsList(); 
     $(element).tagit("removeAll"); 
     for(var x = 0; x < tags.length; x++) { 
      $(element).tagit("createTag", tags[x]); 
     } 
     ko.bindingHandlers.tagit.loading = false; 
    }