1

同じページにリストと詳細ビューがあります。これを使用して連絡先をリストします。リスト内の 1 つの連絡先をクリックすると、詳細ビ​​ューがバインドする「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 が設定されないため、このページをロードするとクラッシュします。それまでは、何も表示したくありません。

最も簡単な方法は何ですか？ありがとうございました。:)

4

1 に答える 1

2

外部に 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/未定義かどうかに応じて、子孫要素を動的に追加または削除します。

于 2012-09-05T11:02:41.873 に答える