淘汰赛复合绑定答案

【问题标题】：Knockout complex binding淘汰赛复合绑定
【发布时间】：2013-11-29 23:20:24
【问题描述】：

请看看我的 jsFiddle http://jsfiddle.net/chugh97/PQvFc/23/

我可以毫无问题地添加多个电话并将它们删除，但是当我添加多个地址时它不起作用。我只能添加一个地址。

    var user = { id: 1 };

var UserModel = function(data) {
    var self = this;
    self.phones = ko.observableArray([]);
    self.addresses = ko.observableArray([]);

    self.addPhone = function(phone) {
        self.phones.push({
            type: phone.type,
            number: phone.number
        });
    };

    self.removePhone = function(phone) {
        self.phones.remove(phone);
    };

    self.addAddress = function() {
        self.addresses({
            line_1: "",
            line_2: "",
            town: "",
            postcode: "",
            country: ""
        });
    };

    self.removeAddress = function(address) {
        self.addresses.remove(address);
    };

    self.save = function() {
        //alert(JSON.stringify(ko.toJS(self), null, 2));
        self.lastSavedJson(JSON.stringify(ko.toJS(self), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};


    ko.applyBindings(new UserModel(user));

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

这是更新后的小提琴：http://jsfiddle.net/PQvFc/28/

在您发布的小提琴链接中，delivery_address 是 observable，而不是 observableArray，并且您添加和删除的代码没有将地址传递给函数。

我不能 100% 确定这会解决您的问题，但它使地址的工作方式与您的电话号码的工作方式相同。

【讨论】：

【解决方案2】：

您需要在addresses数组上调用push来添加多个项目。

更新的示例代码如下所示：

    var user = { id: 1 };

var UserModel = function(data) {
    var self = this;
    self.phones = ko.observableArray([]);
    self.addresses = ko.observableArray([]);

    self.addPhone = function(phone) {
        self.phones.push({
            type: phone.type,
            number: phone.number
        });
    };

    self.removePhone = function(phone) {
        self.phones.remove(phone);
    };

    self.addAddress = function() {
        self.addresses.push({
            line_1: "",
            line_2: "",
            town: "",
            postcode: "",
            country: ""
        });
    };

    self.removeAddress = function(address) {
        self.addresses.remove(address);
    };

    self.save = function() {
        //alert(JSON.stringify(ko.toJS(self), null, 2));
        self.lastSavedJson(JSON.stringify(ko.toJS(self), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};


    ko.applyBindings(new UserModel(user));

【讨论】：