Обмен наблюдаемыми

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

Binding пример:

<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