Question

我在同一页面上有一个列表和一个详细信息视图。我用它来列出联系人。当我单击列表中的一个联系人时，它会设置一个“selectedContact”属性，我的详细信息视图会绑定该属性以显示有关此选定联系人的详细信息。但是，在我选择联系之前，绑定崩溃了，因为该属性尚未设置。我怎样才能做到这一点？

JS一般结构。

self.contacts = ko.observableArray();
self.selectedContact = ko.observable();

self.selectContact = function (contact) {
        self.selectedContact(contact);
        alert(self.selectContact.Name);
    }

HTML

<h3>
    <span data-bind="text: selectedContact.Name"></span>
</h3>
<div>
    <span data-bind="text: selectedContact.Number"></span>
</div>
<div>
    <span data-bind="text: selectedContact.Email"></span>
</div>

如此简单。加载此页面会崩溃，因为在我单击列表中的联系人之前未设置selectedContact。在此之前，我并不希望它显示任何内容。

最简单的方法是什么？谢谢。：）

Answer 1

在外面添加一个div，并将其结构如下：

<div data-bind="with: selectedContact">
  <h3>
    <span data-bind="text: Name"></span>
  </h3>
  <div>
    <span data-bind="text: Number"></span>
  </div>
  <div>
    <span data-bind="text: Email"></span>
  </div>
</div>

with绑定将动态添加或删除后代元素，具体取决于相关值是否为null / undefined。

绑定尚未初始化的财产

1 个答案: