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>

在这种情况下，我有一个子 ViewModel，我将其设置为模态 div 的 DataContext。当用户单击“保存”按钮时，我正在调用父 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 回答