KnockoutJS：ビューモデル内のオブジェクト内のObservableオブジェクトがリフレッシュしない

Question

viewmodelでobservablesによってknockoutJSデータバインドに問題が発生しています。ビューモデル内のオブジェクト内のオブジェクト内の特定のオブザーバブル（オブジェクト）プロパティにアクセスしようとすると、値が更新されないように見えます。

<li data-bind="attr: {id: 'option-' + modalData().modalid }, modal: {template: 'modal-template', modalid: modalData().modalid, title: modalData().title, options: {heading: modalData().title, trigger: 'click'}, customElement: $('.modal-dropdown') }"> 
    <a href="#">Open Modal</a> 
</li> 

モーダルダイアログを正しく初期化するには、設定でオプションプロパティを指定する必要があります。正しいタイトルを表示するには、modalData（）のタイトルにアクセスする必要があります。この問題は、オープンした後に別のモーダルダイアログを開こうとすると表示されます。タイトルのバインディングはoptions-propertyで正しく動作していないようです。

別のモーダルをクリックすると、id属性のバインドが正しく更新されますが、見出しには最初にクリックされたモーダルダイアログの値が表示されます。

私はこれをどのように修正することができますか、私が間違っていることを知っていますか？私はオプション内のオブジェクトの内部にあるオブザーバブルにアクセスしていて、どうにかそれが変わってしまうという事実と関係しているとしか思えません。

ありがとうございました！

Answer 1

モーダルはMVVM paradigmで達成するのは難しいことです。

data-attributeここで提供される多くのモーダルライブラリは、非常に入門的/単純/高レベルのライブラリの使用方法と見なすべきです。ほとんどの場合、ドキュメントの "API"セクションにまっすぐにスキップする必要があります（もちろん、ユースケースは単純にDEADです）。

私はいつも、 "オプション"のオブジェクトを渡すCustom Bindingでこれを行うためのロジックをカプセル化することに成功しました。例えば

：あなたのような使用する

ko.bindingHandlers.modal = { 
    init: function(element, valueAccessor) { 
     var options = ko.unwrap(valueAccessor()) || {}; 

     function onClick(){ 
      TheModalLibrary.OpenModal(options); 
     }; 

     element.onclick = onClick; 
    } 
}; 

（それも "クリーン" はそれないに見える？）：

<li> 
    <a href="#" data-bind="modal: modalData">Open Modal</a> 
</li> 

カップル重要なことをここにに注意すること。

1. modalDataが観測可能な場合、または値を変更すると予想される場合は、これをモーダルに反映する必要があります。 initをupdateに変更してください。これにより、依存関係（valueAccessor）が変更されたときにバインドが強制的に再開されます。
2. これは完全に納得のいく例であり、より多くの擬似コードと見なしてください。使用している実際のモーダルライブラリを私に提供した場合は、より具体的なコードサンプルを提供することができます。
3. 基本ノックアウトバインディングは開始点と見なすべきです。物事が遠く離れて複雑になるとすぐに、ノックアウトが提供するツールを広げようとしているはずです。 A la、Custom Binding's,Component'sおよびTemplate'sである。

大きなことは、モーダルのようなDOM指向のものやJavaScriptライブラリとの統合は、通常Custom Bindingアプリケーションに最も適しているということです。実際、明示的に「MVVM」でないものはCustom Bindingに属します。