0

単純なモデルとビュー モデルがあるとします。

// Model
function Model(prop) {
     this.Prop = ko.observable(prop);
}

// View Model
function ViewModel(){
     var self = this;

     this.CurrentItem = ko.observable(new Model("abc"));

     this.Edit = function(){
          $(#"EditDiv").dialog("show");
     }
}

次に、html:

<body>
      <input type="button" data-bind="click: Edit"/>
      <div id="EditDiv" data-bind="with: CurrentItem">
         <input type="text" data-bind="value: Property" />
      </div> 
</body>

次に、ページの下部にあるスクリプト:

$(document).ready(function(){
      $("#EditDiv").dialog({ /* settings to hide it first. */ });

      ko.applyBindings(new ViewModel());
});

上記のコードは機能し、「abc」というテキストを含むテキスト ボックスを含む jQuery ウィンドウをポップアップ表示します。

ただし、ページを div に分割し、各 div に異なるモデル ビューを割り当てると、バインディングが壊れます。

<body>
     <div id="ForAnotherBindingContextDiv">
     </div>
     <div id="TargetContextDiv">
          <input type="button" data-bind="click: Edit"/>
          <div id="EditDiv" data-bind="with: CurrentItem">
              <input type="text" data-bind="value: Property" />
          </div>  
     </div>
</body>

そこで、バインディングを次のように変更します。

ko.applyBindings(new ViewModel(), $("#TargetContextDiv")[0]);

上記でも編集ウィンドウがポップアップしますが、テキスト ボックスは空です。私には、.dialog("show") を呼び出すときに jQuery がダイアログの設定全体をドキュメントのルート レベルに配置するため、バインディングが壊れているように見えますViewModel。

jQuery には、ダイアログ全体の修正をルート レベルに配置しないオプションがありますか? 私が取ることができる別のアプローチはありますか？(カスタム バインディング ルートも試しましたが、どちらもバインドしませんでした。エラー メッセージ テキストのように、そのような div の内容が (バインディングなしで) 静的である場合に機能します)。

4

1 に答える 1

5

バインディングのコレクションにダイアログバインディングがあります。ロジックからDOMを抽象化する方がはるかに優れています

https://github.com/AndersMalmgren/Knockout.Bindings

デモ http://jsfiddle.net/H8xWY/130/

<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>
于 2013-01-29T17:50:38.927 に答える