Knockout binding using same objects in multiple times in same page

Question

ViewModel :

var address = new function {
    var self = this;
    self.add1 = ko.observable();
    self.add2 = ko.observable();
    self.city = ko.observable();
    self.state = ko.observable();
    self.postal = ko.observable();
},
person = new funcion {
    var self = this;
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.address = ko.observable(address);
},
company = new function {
    var self = this;
    self.salesPerson = ko.observable(person);
    self.shippingAddress = ko.observable(address);
    self.billingAddress = ko.observable(address);
};

View:

<div>
    <h3>Shipping Address</h3>
    <span class="">Address1: </span><input type="text" data-bind="value:company.shippingAddress.add1">
    <span class="">Address2: </span><input type="text" data-bind="value:company.shippingAddress.add2">
    <span class="">City: </span><input type="text" data-bind="value:company.shippingAddress.city">
    <span class="">State: </span><input type="text" data-bind="value:company.shippingAddress.state">
    <span class="">Postal: </span><input type="text" data-bind="value:company.shippingAddress.postal">
</div>

<div>
    <h3>Billing Address</h3>
    <span class="">Address1: </span><input type="text" data-bind="value:company.billingAddress.add1">
    <span class="">Address2: </span><input type="text" data-bind="value:company.billingAddress.add2">
    <span class="">City: </span><input type="text" data-bind="value:company.billingAddress.city">
    <span class="">State: </span><input type="text" data-bind="value:company.billingAddress.state">
    <span class="">Postal: </span><input type="text" data-bind="value:company.billingAddress.postal">
</div>

Problem :

In my view if I change address in one place it's changing everywhere. I need to use observable because I'm also displaying those details in the same page.

Any help please?

Answer 1

This doesn't make any sense - a binding is two-ways for a reason, why would you want to bind to a property but not share it? If you want each individual to have different information just use a different observable to bind to...

function address () {
    var self = this;
    self.add1 = ko.observable();
    self.add2 = ko.observable();
    self.city = ko.observable();
    self.state = ko.observable();
    self.postal = ko.observable();
},
company = new function {
    var self = this;
    self.salesPerson = ko.observable(person);
    self.shippingAddress = ko.observable(new address());
    self.billingAddress = ko.observable(new address());
};

In this situation I am using an anonymous function instead of a constructor. The constructor will be evaluated only once and be bound to the same object. The anonymous function will be initialized twice separately.