18

プロパティにバインドする方法は知っていますが、Parent.Childのようなプロパティにバインドするにはどうすればよいですか。

KnockoutJS.comのhelloworldの例を使用する：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へのバインディングを作成したいと思います。

ここでjsfiddleを作成しました

ありがとう

4

2 に答える 2

28

とても近いです！

あなたが欲しい

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

更新されたフィドルhttp://jsfiddle.net/szk2e/2/

于 2012-04-10T15:20:59.517 に答える
18

これが私の特定の状況に最も適しているので、ここに答えを追加します...

ティムの答えがうまくいかない状況があります。これは、親プロパティがである可能性がある場合undefinedです。

たとえば、itemsSourceとselectedItemの共通パターン（ユーザーがリストから1つのアイテムを選択する場合）を使用している場合、 selectedItemは最初の評価時、およびユーザーが選択を取り消すたびに未定義になります。バインディングを使用すると、text:selectedItem().SomePropertyノックアウトが「中断」され、バインディングが評価されなくなります。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>

このバインディングの動作は（ドキュメントから）であることに注意してください

withバインディングは、関連付けられた値がnull / undefinedであるかどうかに応じて、子孫要素を動的に追加または削除します

プロパティが未定義であるかどうかに応じてコンテナも非表示にする必要がある場合は、<!-- ko -->仮想要素を使用してコンテナを囲む必要があります。 詳細については、こちらをご覧ください。

于 2014-09-01T20:02:25.347 に答える