Javascript knockout binding nested objects not working

Question

I'm am relatively new to the use of the knockout javascript library. I'm having a problem getting an observable property which is an object of another object. Here is my code:

function Customer(id) {
    var self = this;

    self.customer_id = ko.observable(id);
    self.custnum = -1;

    self.busname = ko.observable("");
    self.address = "";
    self.city = "";
    self.state_id = "";
    self.zipcode = "";
    self.cnt_sal_id = "";
    self.cnt_first_name = "";
    self.cnt_last_name = "";
    self.cnt_title = "";

    //alert("customer: " + self.customer_id());

}


var CustomerEntryViewModel = function(date) {
    var self = this;

    self.last_update = ko.observable(date);
    self.customer = ko.observable(new Customer(""));

    self.addCustomer = function (id) {
        var c = new Customer(id);
        self.customer = c;
        alert("New id: " + self.customer.customer_id() + " num: " + c.custnum);
    }

    self.customerSearch = function () {
    }

    self.editCustomer = function (customer_id) {
    }

    self.save = function(customer) {    
    }           
}

How do I go about binding to the properties in the Customer object. I try to to use typical javascript dot notation like so: customer.customer_id

Here is the html that binds the data:

<div class="field-input" style="margin-bottom:10px;">
    <input type="text" id="customer_id" style="width:100%;" 
        data-bind="jqxInput: { placeHolder: 'Customer #', value: 
                               customer().customer_id, height: 21, width: 208, 
                               minLength: 1, disabled: true }"/>
</div>

Adam Rackis · Accepted Answer · 2013-12-10 19:51:32Z

12

Since customer is an observable, you have to unroll it in your bindings. So it would be something like:

<div data-bind="text: customer().address"></div>

And similarly, this

alert("New id: " + self.customer.customer_id() + " num: " + c.custnum);

would be

alert("New id: " + self.customer().customer_id() + " num: " + c.custnum);
                          //     ^ unrolled

answered Dec 10, 2013 at 19:51

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Rackis Over a year ago

@user2864740 - ah, this knockoutjs.com/documentation/… Seems really cool. Added to my reading list :)

user3088317 Over a year ago

Adam, thanks for the response. Believe it or not, this part works: alert("New id: " + self.customer.customer_id() + " num: " + c.custnum); However, the same reference does NOT work in my html bindings.

Hakan Fıstık · Accepted Answer · 2017-01-29 14:42:30Z

-3

Try this, should be helpful :

<div class="field-input" style="margin-bottom:10px;">
  <input type="text" id="customer_id" style="width:100%;" data-bind="value: customer().customer_id, disabled: true" />
</div>

edited Jan 29, 2017 at 14:42

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Oct 10, 2014 at 12:43

Distnie Zimmer

12 bronze badges

1 Comment

JohnnyHK Over a year ago

Welcome to SO, but please stop adding answers that duplicate existing ones.

Collectives™ on Stack Overflow

Javascript knockout binding nested objects not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related