Question

我有两种递送形式（包括姓名，地址，邮政编码等），还有一个按钮，上面写着“送货地址与送货地址相同”。基本上我正在尝试这样做，以便当用户单击该按钮时，第一个字段中的相同可观察量随后与第二个字段共享。我如何接近这个（可能非常错误）是通过设置两组可观察量来实现的：

    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
self.phoneNumber = ko.observable("");
self.address1 = ko.observable("");
self.address2 = ko.observable("");
self.city = ko.observable("");
self.state = ko.observable("");
self.postcode = ko.observable("");

    self.delFirstName = ko.observable("");
    self.delLastName = ko.observable("");
self.delPhoneNumber = ko.observable("");
self.delAddress1 = ko.observable("");
self.delAddress2 = ko.observable("");
self.delCity = ko.observable("");
self.delState = ko.observable("");
self.delPostcode = ko.observable("");

然后我尝试设置一个功能，点击后，将分享运送详细信息。

self.sameDelAddress = function() {
    self.delFirstName() = self.firstName(self.firstName);
            self.delLastName() = self.lastName(self.lastName);
    self.delPhoneNumber() = self.phoneNumber(self.phoneNumber);
    self.delAddress1() = self.address1(self.address1);
    self.delAddress2() = ko.observable(self.address2);
    self.delCity() = ko.observable(self.city);
    self.delState() = ko.observable(self.state);
    self.delPostcode() = ko.observable(self.postcode);
}

Answer 1

我认为你想要的是类似下面的代码。看看this小提琴，看一个有效的例子。

选中复选框后尝试更新一个字段，您将看到其他字段自动更新。

function addressModel() {
    var self = this;
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
    self.phoneNumber = ko.observable("");
    self.address1 = ko.observable("");
    self.address2 = ko.observable("");
    self.city = ko.observable("");
    self.state = ko.observable("");
    self.postcode = ko.observable("");
}

function deliveryModel(shipAddress, billAddress) {
    var self = this;
    self.shippingAddress = ko.observable(shipAddress);
    self.billingAddress = ko.observable(billAddress);
    self.addressesAreSame = ko.observable();

    self.addressesAreSame.subscribe(function(newValue){
        if(newValue===true){
            self.billingAddress(self.shippingAddress());
        }else{
            self.billingAddress(new addressModel());
        }
    });
}

var delivery = new deliveryModel(new addressModel(), new addressModel());
ko.applyBindings(delivery);

绑定示例：

<div data-bind="with: shippingAddress">
    Shipping Address<br />
    <input type="text" data-bind="value: address1" />
</div>
<div data-bind="with: billingAddress">
    Billing Address<br />
    <input type="text" data-bind="value: address1" />
</div>
<input type="checkbox" data-bind="checked: addressesAreSame" /> Billing same as shipping

分享可观察量

1 个答案: