javascript Knockout.js 如何绑定到子属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10091530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout.js how do i bind to a sub property
提问by Andre
I know how to bind to a property, but how do i bind to a property like: Parent.Child
我知道如何绑定到一个属性，但我如何绑定到一个属性，如：Parent.Child
Using the hello world example on Knockout JS.com: Html:
使用 Knockout JS.com 上的 hello world 示例：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:
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.
我想创建一个到 childProperty 的绑定。
I created a jsfiddle here
Thanks
谢谢
回答by Tim B James
So so very close!
所以非常接近！
You want
你要
<span data-bind="text: parentProperty().childProperty"> </span>
Your updated fiddle http://jsfiddle.net/szk2e/2/
你更新的小提琴http://jsfiddle.net/szk2e/2/
回答by Andre
Adding an answer here as this is the best fit to my particular situation...
在此处添加答案，因为这最适合我的特定情况...
There is a situation where Tim's answer won't work. This is when the parent property can be undefined.
在某些情况下，Tim 的答案不起作用。这是父属性可以是undefined.
For example, if you're using the common pattern of itemsSourceand selectedItem(where the user selects a single item from a list) selectedItemwill be undefinedon first evaluation, and whenever the user has undone their selection. Using the binding text:selectedItem().SomePropertywill "break" knockout, preventing bindings from being evaluated. Note, trying to short circuit this using the visiblebinding (e.g., text:selectedItem().SomeProperty, visible:selectedItem) will NOT work.
例如，如果您使用itemsSource和selectedItem的通用模式（用户从列表中选择单个项目）selectedItem将在第一次评估时未定义，并且每当用户撤消选择时。使用绑定text:selectedItem().SomeProperty将“打破”淘汰赛，防止绑定被评估。请注意，尝试使用visible绑定（例如，text:selectedItem().SomeProperty, visible:selectedItem）将其短路是行不通的。
In this case, you have to use the withbindingto switch the binding context to the value of the property. So, using OP's example...
在这种情况下，你必须使用的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>
Note that the behavior for this binding is (from the docs)
请注意，此绑定的行为是（来自文档）
The with binding will dynamically add or remove descendant elements depending on whether the associated value is null/undefined or not
with 绑定将根据关联值是否为空/未定义动态添加或删除后代元素
If you also need to hide the container depending on whether the property is undefined or not, then you should use the <!-- ko -->virtual element to surround the container. More information can be found here.
如果您还需要根据属性是否未定义来隐藏容器，那么您应该使用<!-- ko -->虚拟元素来包围容器。 更多信息可以在这里找到。
