无法处理绑定

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，或者我以错误的方式尝试这种方式，是否会忽略绑定？

编辑：here's a jsFiddle但我注意到它与我正在使用的node-webkit环境的行为没有100％相同，它接收列表中第一项的所有数据，但之后没有别的确实

Answer 1

首先，你必须让selectedItem成为一个观察者，以便在变化时得到通知：

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 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。