javascript - 如何创建 ViewModel 事件模式

Question

我有一个使用 Knockout.js 构建的 Web 应用程序，但我未能实现的一件事是正确的可重用 HTML。现在，即使我有一个由多个其他 View 共享的 View (例如对话框)，我也必须复制并粘贴 HTML 代码并将其嵌套在父级中，以便在子级和父级之间实现正确的绑定(bind)通信。

这是一个例子:

<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>

在本例中，我有一个子 ViewModel，我将其设置为模式 div 的 DataContext。当用户单击“保存”按钮时，我将调用父 DataContext 上的方法。

我知道如何将模式分解为单独的 HTML 模板并生成动态提供 ViewModel 的模板。这适用于显示和隐藏模式，因为我只需要在父级代码中执行以下操作:

this.Address().IsShown(true);

在这种情况下，模式将简单地将其可见性绑定(bind)到自身的属性，父级只需要更改它。没关系。

但是，当我点击保存按钮时会怎样呢？我不知道如何让父级使用 Knockout.js 的 MVVM 模式响应这种情况。该按钮仍然需要一个 click 绑定(bind)，它将绑定(bind)到 AddressViewModel 上的任意代码，但它如何使用 Knockout 向其父级发出事件信号？

是否无法使用 Knockout 来执行此操作？我是否需要为事件实现一个单独的库，例如 Underscore.js？

Answer 1

这不是对您问题的直接答案，但您尝试解决的问题可以通过使用像 DurandalJS 这样的库来消除。它建立在 knockout 之上并处理 View 合成。 Durandal 提供了许多功能来实现您正在寻找的代码重用，而无需重新发明轮子。它并不适合每个项目，但它可能适合您的需求。