knockout.js - 绑定到尚未初始化的属性

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根据关联值是否为空/未定义来动态添加或删除后代元素。