knockout.js - 動的プロパティ名を使用した knockoutjs 動的テンプレート バインディング

Question

以下は、knockoutjs Web サイトのチュートリアルから取得したサンプルです。私の問題はもう少し複雑で、Web アプリケーション用に再利用可能なウィザード、コントロール、またはコンポーネントを作成したいと考えています。

次のシナリオは、私が直面している非常に一般的な問題の 1 つを表しています。つまり、テンプレート バインディングはビュー モデル プロパティとは異なります。person-template を見ると、'name' プロパティでビュー モーダルから取得される 'name' プロパティでバインドされています。ここで、非常によく似た 2 つのビュー モデルがあるが、いくつかのプロパティ名が異なる状況を想像してください。動的プロパティにバインドできます。

この例では、買い手と売り手の両方で機能します。提案やアイデアは大歓迎です。

私の問題はこれよりも複雑で、かなり行き詰まっています。

ありがとう。

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
     // Now name property is bind, where as view model has two
     // properties named BuyerName and SellerName, so it is not going to work.
     <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/javascript">
     function MyViewModel() {
         this.buyer = { BuyerName: 'Franklin', credits: 250 };
         this.seller = { SellerName: 'Mario', credits: 5800 };
     }
     ko.applyBindings(new MyViewModel());
</script>