Knockout.js

Question

私はプロパティにバインドする方法を知っているが、どのように私のようなプロパティにバインドします：ノックアウトJSのハロー世界の例を使用して Parent.Child

。 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")); 

私はchildPropertyへの結合を作成したいと思います。

私はそうそう

Answer 1

非常に近いjsfiddle here

感謝を作成しました！

あなたは、これは私の特定の状況に最も適合しているよう

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

あなたの更新フィドルhttp://jsfiddle.net/szk2e/2/

Answer 2

はここに答えを追加したい...

ティムの答えは勝った状況があります仕事はありません。親プロパティをundefinedにすることができます。あなたは（ユーザーはリストから単一の項目を選択）のItemsSourceとのSelectedItemのSelectedItemの一般的なパターンを使用している場合

例えば、は、最初の評価に未定義、およびたびになりますユーザーは選択を元に戻しました。バインドを使用すると、ノックアウトが「中断」され、バインディングが評価されなくなります。これには、visibleバインディング（例：text:selectedItem().SomeProperty, visible:selectedItem）を使用して短絡することはできません。

この場合、withバインドを使用して、バインディングコンテキストをプロパティの値に切り替える必要があります。この結合のための動作となるように、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> 

注（ドキュメントから）

ザ動的に関連付けられた値かどうかに応じて子孫要素を追加または削除します結合とあなたも、あなたがコンテナを囲むように<!-- ko -->仮想要素を使用する必要があり、プロパティが定義されていないかどうかに応じて、コンテナを非表示にする必要がある場合は/ nullで未定義か

です。 More information can be found here.