淘汰赛替换绑定模型

Question

我有一个模式对话框来添加新模型，并且在成功提交 ajax 后我希望能够输入一个新模型。所以我的逻辑是这样的：

新模型的按钮->将editViewModel设置为新模型实例->提交按钮->成功提交后将editviewModel设置为新模型

function model() {
    this.name = ko.observable("");
}

var myViewModel = new model();
myViewModel.name("Name 1");
ko.applyBindings(myViewModel, document.getElementById('foo'));

function newViewModel() {
    myViewModel = new model();
    myViewModel.name("NewName");
    //ko.applyBindings(myViewModel, document.getElementById('foo'));
}​

小提琴：http://jsfiddle.net/56gkz/

为了让它工作，我必须在将 editViewModel 更改为新模型实例后重新应用绑定。 那么再次应用绑定是正确的方法还是有更好的解决方案来处理这种情况？

Answer 1

一般来说，您会希望创建一个整体视图模型，在该模型上调用一次 applyBindings，然后包含一个可观察对象，用于换入和换出模型以进行编辑。然后，在您的标记中，您可以使用 with 绑定将标记的一部分与该可观察对象的当前值绑定。

JS 代码可能如下所示：

function Model(name) {
    this.name = ko.observable(name);
}

function RootViewModel() {
    var self = this;

    this.selectedModel = ko.observable();
    this.models = ko.observableArray();

    this.createModel = function() {
        self.selectedModel(new Model("New Name"));
    };

    this.acceptModel = function(model) {
        self.models.push(model);
        self.selectedModel(null);
    };      

    //initialize with a model to start
    this.createModel();       
};


ko.applyBindings(new RootViewModel());​

标记如下：

<div data-bind="with: selectedModel">
    <input data-bind="value: name" />
    <button data-bind="click: $root.acceptModel">Accept</button>
</div>

<button data-bind="click: createModel">New Model</button>

<hr/>

<ul data-bind="foreach: models">
    <li data-bind="text: name"></li>
</ul>

示例：http://jsfiddle.net/rniemeyer/RWYL6/