knockout.js - 无法处理绑定(bind)

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;

这阻止了所有其他绑定(bind)的发生(我还有一个删除按钮)。

控制台消息似乎表明 viewModel 是在页面之后处理的或导致该效果的原因，否则它会提示空值对吗？？？如果 selectedItem 为 undefined/null 或者我是否以错误的方式尝试，是否有忽略绑定(bind)？

编辑: here's a jsFiddle但我注意到它的行为与我正在使用的 node-webkit 环境并没有 100% 相同，它接收列表中第一项的所有数据，但没有其他任何东西

Answer 1

首先你必须制作 selectedItem到一个可观察的，以便在它发生变化时得到通知:

self.selectedItem = ko.observable(null);

然后你需要处理 selectedItem 时的情况。在您的绑定(bind)中为空:

<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 binding处理 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 .