无法处理绑定

Question

我目前正在尝试使用此模型创建人员列表

{firstName: "", lastname: "", address:""}

在多值选择.

在我的viewModel中,我有一个名为selectedItem的字段,我将其设置为null,因为没有选择任何内容开始.

在我的视图中,我能够将selectedItem设置为在我的Select元素中选择的项目,然后我想在屏幕上显示selectedItem的属性,我尝试的方式是

<p data-bind="text: selectedItem.firstName">First Name</p>
<p data-bind="text: selectedItem.lastName">Last Name</p>
<p data-bind="text: selectedItem.address">Address</p>

但它在控制台中说明了这一点

Unable to process binding "text: function (){return selectedItem.firstName }"
Message: Cannot read property 'firstName' of undefined;

这会阻止所有其他绑定发生(我还有一个删除按钮). 控制台消息似乎表明viewModel是在页面之后处理或者那个效果导致的,否则它会抱怨空值正确??? 无论如何,如果selectedItem未定义/ null,或者我以错误的方式尝试这种方式,是否会忽略绑定？

编辑:这是一个jsFiddle,但我注意到它与我正在使用的node-webkit环境的行为不同100%,它接收列表中第一个项目的所有数据,但之后没有别的什么

Answer 1

首先,您必须使selectedItem一个observable在更改时收到通知:

self.selectedItem = ko.observable(null);

然后你需要selectedItem在绑定中为空时处理这种情况:

<div class="col-md-8">
    <p data-bind="text: selectedItem() && selectedItem().firstName">First Name</p>
    <p data-bind="text: selectedItem() && selectedItem().lastName">Last Name</p>
    <p data-bind="text: selectedItem() && selectedItem().address">Address</p>
</div>

然而,一个更合适的解决方案是使用with绑定来处理当时的 selectedItem情况null并且还减少重复:

<div class="col-md-8" data-bind="with: selectedItem">
    <p data-bind="text: firstName">First Name</p>
    <p data-bind="text: lastName">Last Name</p>
    <p data-bind="text: address">Address</p>
</div>

演示JSFiddle.