Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout.js how do i bind to a sub property

Tags:

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: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<h2>ChildProperty: <span data-bind="text: parentProperty.childProperty"> </span>!</h2>

Javascript:

var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.parentProperty = ko.observable(
    {
        childProperty: "I am a child Property"
    });

this.fullName = ko.computed(function() {
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName      and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth"));

I would like to create a binding to the childProperty.

I created a jsfiddle here

Thanks