knockout.js 无法处理绑定

wribegjk  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(209)

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

{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;

这会阻止所有其他绑定的发生(我有一个删除按钮)。x1c 0d1x控制台消息似乎表明viewModel是在页面之后处理的,或者是类似的原因,否则它会抱怨空值,对吗???如果selectedItem是undefined/null,是否有任何方法可以忽略绑定?或者我尝试的方法不对?
编辑:here's a jsFiddle,但我注意到它的行为与我使用的node-webkit环境并不完全相同,它接收列表中第一项的所有数据,但其他项都不接收

ovfsdjhp

ovfsdjhp1#

首先,必须将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,它处理selectedItemnull的情况,并且还减少了重复:

<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

相关问题