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

knockout access parent viewmodel
knockout observable object
with binding knockout
ko data
knockout data
knockout foreach
knockout mvvm
root knockout js

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?

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.

Knockout : The "with" and "using" bindings, 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. A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts.

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>

Binding context, Here is a very basic example of switching the binding context to a child object. is null / undefined or not; If you want to access data/functions from parent binding contexts, you can use special context properties such as $parent and $root . I know how to bind to a property, but how do i bind to a property like: Parent.Child Using the hello world example on Knockout JS.com: Html: <p>First name: <;input data-bind="value: first

It can be also written as:

<span data-bind="text: dataTest()['SalePrice']"></span>

Binding context, A binding context is an object that holds data that you can reference from your Bindings contexts offer the following special properties that you can reference in if you need to access the index value of an outer foreach item from an inner  I have a nested foreach loop in Knockout.js and I want to access a property from the current object in the outer loop inside the inner loop. <!-- ko foreach: graduationDateRows --&gt;

If the page is read only, and the view model will not change, (as in my case) then you don't need the observable.

You can also make the code sample work by doing this:

var viewModel={
    dataTest: data
};

Then you can access your properties in the data binding with simple dot notation.

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

Using a context or with binding was not desirable in my case since I would have to continually switch back and forth between 2 objects in a comparison table.

When to use $root keyword to refer view model function in knockout , . js automatically updates any associated HTML elements whenever items are added or removed. The default behavior of the as option is to set a name for the provided object while still also binding the contents to the object. But you may prefer to keep the context unchanged and only set the name of the object. This latter behavior will probably be the default in a future version of Knockout.

Call to ko.observable needs to be moved from MVVM to HTML element:

    var data ={
    "Id" : 1001,
    "SalePrice" : 12345,
    "ListPrice" : 333,
    "ShortDesc" : "Tayler 12345E",
    "Description" : " Long Description"
};


var viewModel={
    dataTest: data
};


ko.applyBindings(viewModel);

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

Knockout Observables, library that allows binding HTML elements against any data model. It is primarily used for creating rich and responsive display as well as editor user interfaces with a clean, underlying data model. deferEvaluation — Optional. If this option is true, then the value of the computed observable will not be evaluated until something actually attempts to access its value or manually subscribes to it. By default, a computed observable has its value determined immediately during creation. disposeWhen — Optional.

7 Reasons to Use Knockout.js for Web Development, The time on the server is: <span data-bind= 'text: serverTime' ></span>. and <​span All properties of an object are converted into an observable. If an update​  Purpose. The html binding causes the associated DOM element to display the HTML specified by your parameter. Typically this is useful when values in your view model are actually strings of HTML markup that you want to render. If you know your view model value is plain text, use the more efficient text binding instead.

Mapping, Alternatively, pass a JavaScript object literal with a property called data which is inside this foreach loop, bindings will be able to refer to person to access the  The "attr" binding Purpose. The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property

The "foreach" binding, If you know your view model value is plain text, use the more efficient text binding instead. Example. <div data-bind= "html: details" >  knockout.js nested foreach access outer loop property - Wikitechy foreach access outer loop property - Wikitechy the outer loop from the present object in the

Comments
  • Nice catch about the observable.
  • thanks for your answer, is it possible to itarate over "data" object in order to access all properties at once?
  • @stratovarius That's probably a new question. I'm not exactly sure what you're asking in this context, since SalePrice is a single int. If you mean can you grab everything from dataTest(), you certainly can. But doing so within a single bound object like the one here doesn't make a lot of sense. But perhaps you want a computed observable? Hard to tell -- search SO for a similar question to what you're asking, and if nothing pops up, feel free to ask a new one!
  • I would like to access dataTest()'s properties with the help of foreach.
  • Very nice to see that you first add a solution, before questioning the OP's approach.
  • I know we can do that directly. But, I'm trying to access the object which is assigned to property of viewModel.
  • This is very long process when we really have permission to access through chaining
  • The OP does not say if 2 way data binding is necessary, so this is another answer to the question. I hope it helps someone else.