Question

我有一个使用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>

在这种情况下，我有一个子ViewModel，我将其设置为模态div的DataContext。当用户单击“保存”按钮时，我正在调用父DataContext上的方法。

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

this.Address().IsShown(true);

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

但是，当我点击保存按钮时呢？我没有看到如何使用Knockout.js的MVVM模式让父级响应此事件。该按钮仍然需要click绑定，该绑定将绑定到AddressViewModel上的任意代码，但它如何使用Knockout向其父节点发送事件？

使用Knockout无法做到这一点吗？我是否需要为事件实现一个单独的库，如Underscore.js？

Answer 1

这不是您问题的直接答案，但是您尝试解决的问题可以通过使用类似DurandalJS的库来消除，该库构建在基于挖掘的视图组合之上。 Durandal提供了许多功能，可以实现您正在寻找的代码重用，而无需重新发明轮子。它不适合每个项目，但它可能符合您的需求。

如何创建ViewModel事件模式

1 个答案: