Question

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

新模型的按钮 - ＆gt;将editViewModel设置为新的模型实例 - ＆gt;提交按钮 - ＆gt;成功提交后，将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一次，然后包含一个可用于交换模型以进行编辑的observable。然后，在标记中，您可以使用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/

淘汰赛取代了绑定的模型

1 个答案: