以编程方式为模态内容注入模板答案

【问题标题】：Programmatically injecting template for modal's content以编程方式为模态内容注入模板
【发布时间】：2011-09-27 10:55:59
【问题描述】：

我有一个主 ViewModel，我的视图很棒，我有一个模态窗口 (fancybox)，其中包含一些相当复杂的流程（您将在该模型中完成 3 个步骤）。

现在我为此创建了一个新的 ViewModel，而不是用它的关注点污染主 ViewModel。所以我们分别称他们为MainViewModel、ModalViewModel。

我原本打算通过一些模板将模态视图注入到主视图中，然后让fancybox将它们作为内容。但是，这样我将拥有重复的 dom 元素，这可能很危险，因为可能会有重复的元素 ID 等。

所以我想也许我应该尝试找到一种方法来使用 ajax 将模板注入到 fancybox 窗口中。

只是总结一下流程：

那么我这样做的方式是否正确？或者我应该在 MainViewModel 中包含 ModalViewModel 作为子 viewModel 并以这种方式处理它？

【问题讨论】：

【解决方案1】：

既然您可以控制命名模板的 ID，为什么不将模板 ID 重命名为唯一的。

就绑定到 ModalViewModel 而言，您可以拥有这样的 ViewModel：

var MainViewModel = {
  //other props
  Modal : new ModalViewModel()
};

然后将绑定应用到 childViewModel 像这样：

ko.applyBindings(MainViewModel.Modal);

如果整个模态视图不仅仅是一个模板，那么使用以下重载：

ko.applyBindings(MainViewModel.Modal,modalRootElement);

【讨论】：

【解决方案2】：

您应该将该模型作为主视图模型的子模型。

KO 的范例是拥有一个视图模型/页面。

如果您在您的 fancybox 中使用 iframe，则两个视图模型会更有意义（但这会在两个视图模型之间同步数据方面增加其自身的复杂性）。

【讨论】：