knockout.js 无法处理绑定

wribegjk 于 2022-11-10 发布在其他

关注(0)|答案(1)|浏览(210)

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

{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环境并不完全相同，它接收列表中第一项的所有数据，但其他项都不接收

knockout.js

来源：https://stackoverflow.com/questions/27117457/unable-to-process-binding

1条答案

按热度按时间

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，它处理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。

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 无法处理绑定

1条答案

相关问题

热门标签

最新问答