Knockout.js, как мне привязываться к субмуществу

Я знаю, как привязываться к свойству, но как я привязываюсь к свойству вроде: Parent.Child

Использование примера hello world для нокаута 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"));

Я хотел бы создать привязку к childProperty.

Я создал jsfiddle здесь

Спасибо

Ответы

Ответ 1

Итак, очень близко!

Вы хотите

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

Ваш обновленный скрипт http://jsfiddle.net/szk2e/2/

Ответ 2

Добавление ответа здесь, поскольку это лучше всего подходит для моей конкретной ситуации...

Существует ситуация, когда ответ Тима не будет работать. Это когда родительское свойство может быть undefined.

Например, если вы используете общий шаблон itemsSource и selectedItem (где пользователь выбирает один элемент из списка) selectedItem будет иметь значение undefined при первой оценке и всякий раз, когда пользователь отменил выбор. Использование привязки 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>

Обратите внимание, что поведение для этой привязки (из документов)

Связывание со связью будет динамически добавлять или удалять элементы-потомки в зависимости от того, является ли связанное значение null/ undefined или нет

Если вам также нужно скрыть контейнер в зависимости от того, является ли это свойство undefined или нет, тогда вы должны использовать виртуальный элемент <!-- ko --> для окружения контейнера. Более подробную информацию можно найти здесь.