CODEWITHSUNDEEP
javascriptknockout.js
nishant
nishant

Reputation: 985

knockout binding for simple object not working

I can make knockout work for array or simple object but not for a simple json object. Can someone provide pointers plz.

http://jsfiddle.net/aECM9/

html:

<table>
    <tbody>
        <tr><td>customer Number: </td><td data-bind="text: customerData().reference"></td></tr>
        <tr><td>customer Name: </td><td data-bind="text: customerData().name"></td></tr>
        <tr><td>customer Manager Code: </td><td data-bind="text: customerData().managerCode"></td></tr>
    </tbody>        
</table>

javascript:

        var viewModel = {
            customerData: ko.observable()
        };

        ko.applyBindings(viewModel);

        viewModel.customerData({
            reference: 123,
            name: "bob",
            managerCode: 321
        });

Upvotes: 2

Views: 49

Answers (1)

Matt Burland
Matt Burland

Reputation: 45135

Look at the console. When you call applyBindings it throws an error because it tries to access customerData().reference but customerData() is undefined at this point. Move your .applyBindings below where you assign the customerData value.

See: http://jsfiddle.net/aECM9/2/

Another alternative would be to use an if binding to stop knockout from trying to bind properties on customerData() before it has a value:

 <tbody data-bind="if: customerData()">

Now nothing after this to the closing </tbody> tag will be rendered if customerData() is falsy.

http://jsfiddle.net/aECM9/3/

I used tbody, but you could use any appropriate parent tag or even a virtual tag:

<!-- ko if: customerData() -->

Upvotes: 4

Related Questions