Knockout.js how to access the inner object property on data-bind

Question

I've a super simple knockout code below:

var data ={     "Id" : 1001,     "SalePrice" : 12345,     "ListPrice" : 333,     "ShortDesc" : "Tayler 12345E",     "Description" : " Long Description" };   var viewModel={     dataTest: ko.observable(data) };   ko.applyBindings(viewModel);  <span data-bind="text: dataTest.SalePrice"></span> 

Basically, I've passed the whole data object to observable property dataTest. I would have thought it's easy enough to access the property of inner object with dot notation. But's not.

Could someone please help how to make above code to work?

Answer 1

It's an observable now (ie, it's a function). You need to call the function.

<span data-bind="text: dataTest().SalePrice"></span> 

Editing Akshat's fiddle to match.

Not sure why this is an advantage over nesting a proper hierarchy, however. What the OP is asking is pretty anti-pattern. I think you might want to look over the page on binding context Akshat suggests to see how to create the dataTest as a parent object and then drill down in your markup.

Answer 2

Check out the fiddle.All you need to do is this

<span data-bind="text: salePrice "></span> 

This will populate the span element with sale price defined in the view model.

From your question it appears to me that what you are trying to do is bind the view model to different elements of the html page. To achieve this you can pass an id parameter to the apply bindings to bind a specific view model to a specific section of the page. Like this

ko.applyBindings(viewmodel,document.getElementById('id'));  

If you are looking to directly access the view model use the binding context. In this case you need the $data binding context.So the binding in span will change to

<span data-bind="text:$data.salePrice"></span>