html - Javascript knockout binding nested objects not working - Stack Overflow

admin管理员组

文章数量:1287898

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 = "";
    selft_sal_id = "";
    selft_first_name = "";
    selft_last_name = "";
    selft_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>

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>

• javascript
• html
• data-binding
• knockout.js

Share Improve this question Follow edited Dec 10, 2013 at 20:01 nemesv 140k1616 gold badges423423 silver badges362362 bronze badges asked Dec 10, 2013 at 19:46 user3088317user3088317 6111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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>

本文标签： htmlJavascript knockout binding nested objects not workingStack Overflow