Question

假设我们有一个简单的模型和视图模型：

// 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的内容是静态的（没有绑定），就像错误消息文本一样）。

Answer 1

我的绑定集合中有一个对话框绑定。从逻辑

中抽象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>

Knockout和jQuery对话框 - 当视图模型绑定上下文不是document.body时？

1 个答案: