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());
});

上面的代码有效，并且会弹出一个带有文本框的 jQuery 窗口，其中包含文本“abc”。

但是，如果我将页面划分为 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 将整个对话框设置放置在文档的根级别，这现在位于 .dialog("show") 的上下文之外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 回答