KnockoutJS：将不同的 ViewModel 应用于同一个 div答案

【问题标题】：KnockoutJS: Apply different ViewModels to the same divKnockoutJS：将不同的 ViewModel 应用于同一个 div
【发布时间】：2014-06-19 17:13:19
【问题描述】：

想象一下页面上有 n 个按钮，每个按钮在点击时打开一个 div。实际上只有一个 div，它会在单击时重新关联到每个按钮。我希望将 div 上的数据绑定到每个按钮的 ViewModel 实例。

我不知道我是否走在正确的道路上，但到目前为止，我有一个连接到每个按钮的 VM 对象实例。单击按钮 x 时，我可以获取其对应的 VM 并将重新应用绑定到 div。在这种情况下，我需要解耦旧的绑定——我不知道该怎么做。

我的方法对我来说似乎很好，但这可能是因为我来自 C#/Java 背景并将所有内容都视为对象和引用。也许有更好的方法？

【问题讨论】：

【解决方案1】：

在典型的 KO 应用程序中，您可能希望一次性应用绑定。 Knockout 的模板和控制流绑定可以帮助您“交换”内容。

例如，您可能有以下内容的集合：

this.vms = [
   { id: 1, data: {} },
   { id: 2, data: {} },
   { id: 3, data: {} }
];

然后，你可以有一个 observable 来表示当前选择的项目：

this.currentVM = ko.observable();

现在，您可以通过在vms 上执行foreach 来生成按钮。当您单击其中一个项目时，您可以使用该项目填充currentVM。

然后您可以针对currentVM 渲染一个部分，例如：

<div data-bind="with: currentVM">
    ...some content
</div>

Knockout 将处理 currentVM 为空（未渲染），然后为您处理交换内容。此处简要示例：http://jsfiddle.net/rniemeyer/tk3nJ/

【讨论】：