1

Knockout.js を使用して構築した Web アプリケーションがありますが、実装に失敗したのは適切な再利用可能な HTML です。現在、他の複数のビューで共有されているダイアログなどのビューがある場合でも、子と親の間で適切なバインド通信を実現するために、HTML コードをコピーして貼り付け、親にネストする必要があります。

次に例を示します。

<div class="person-view"> <!-- PersonViewModel -->
    <div class="person-details">
        <!-- Person details -->
    </div>
    <button type="button" data-bind="click: EditAddress">Edit address</button>
    <div class="modal hide fade" role="dialog" data-bind="modal: ShowEditAddressModal, with: Address"> <!-- AddressViewModel -->
        <div class="modal-header">
            <h3>Edit address</h3>
        </div>
        <div class="modal-body">
            <!-- Address details -->
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <button class="btn btn-danger" data-dismiss="modal" data-bind="click: function() { $parent.SetAddress($data); }">Save</button>
        </div>
    </div>
</div>

この場合、モーダル div の DataContext として設定するサブ ViewModel があります。ユーザーが [保存] ボタンをクリックすると、親の DataContext でメソッドが呼び出されます。

モーダルを別の HTML テンプレートに分割し、ViewModel を動的に提供するテンプレートを生成する方法を知っています。親のコード内から次のことを行うだけでよいため、これはモーダルの表示と非表示に機能します。

this.Address().IsShown(true);

この場合、モーダルはその可視性をそれ自体のプロパティにバインドするだけで、親はそれを変更するだけで済みます。それはいいです。

しかし、[保存] ボタンをクリックするとどうなるでしょうか。Knockout.js の MVVM パターンを使用して、この発生に親が応答する方法がわかりません。ボタンにはclick、AddressViewModel の任意のコードにバインドするバインドが必要ですが、Knockout を使用して親にイベントを通知するにはどうすればよいでしょうか?

Knockout でこれを行う方法はありませんか?また、イベント用に Underscore.js などの別のライブラリを実装する必要がありますか?

4

1 に答える 1

0

これはあなたの質問に対する直接的な回答ではありませんが、解決しようとしている問題は、ノックアウトの上に構築され、ビューの構成を処理するDurandalJSのようなライブラリを使用することで解消されます。Durandal には、車輪を再発明することなく、探している種類のコードの再利用を可能にする多くの機能が用意されています。すべてのプロジェクトに適しているわけではありませんが、ニーズに合う場合があります。

于 2013-10-16T15:09:04.723 に答える