Knockout.js como me se unen a una sub propiedad

Question

Sé cómo enlazar a una propiedad, pero lo hacen como me ato a una propiedad como: Parent.Child

Usando el ejemplo hola mundo en 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")); 

me gustaría crear una unión a la childProperty.

he creado un jsfiddle here

Gracias

Answer 1

Así que tan cerca!

¿Quieres

<span data-bind="text: parentProperty().childProperty"> </span> 

Su violín actualizado http://jsfiddle.net/szk2e/2/

Answer 2

añadiendo una respuesta aquí, ya que es el mejor ajuste a mi situación particular ...

No es una situación en la que la respuesta de Tim ganó no funciona Esto es cuando la propiedad principal puede ser undefined.

Por ejemplo, si está utilizando el patrón común de ItemsSource y selectedItem (donde el usuario selecciona un elemento de una lista) selectedItem habrá indefinido en la primera evaluación, y siempre que el el usuario ha deshecho su selección. El uso del enlace text:selectedItem().SomeProperty "romperá" el knockout, evitando que se evalúen los enlaces. Tenga en cuenta que tratar de cortocircuitar esto utilizando el enlace visible (por ejemplo, text:selectedItem().SomeProperty, visible:selectedItem) NO funcionará.

En este caso, debe usar with vinculando para cambiar el contexto de enlace al valor de la propiedad. Por lo tanto, utilizando el ejemplo de OP ...

<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 data-bind="with:parentProperty">ChildProperty: 
    <span data-bind="text: childProperty"></span>! 
</h2> 

Tenga en cuenta que el comportamiento de esta unión es (a partir de los documentos)

El con la unión será dinámicamente añadir o eliminar elementos descendientes en función de si el valor asociado es nulo/no definido o no

Si también necesita ocultar el contenedor en función de si la propiedad no está definida o no, entonces usted debe utilizar el elemento virtual <!-- ko --> para rodear el contenedor. More information can be found here.