Javascript 以编程方式为modal'；内容

我有一个主视图模型和一个很棒的视图，还有一个模式窗口（fancybox），其中包含一些非常复杂的流程（您将在该模型中经历3个步骤）

现在，我已经为此创建了一个新的ViewModel，而不是用它的关注点污染主ViewModel。因此，让我们分别调用它们

MainViewModel

，

ModalViewModel

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

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

总结一下流程：

用户进入主视图

用户单击生成模式窗口的链接

用户在modal中填写表单

用户在模式中单击提交

用户进入模态形式的第二阶段

用户在modal中填写表格2

用户提交表单

用户被发送到新页面

---

那么我这样做对吗？或者我应该将ModalViewModel作为子视图模型包含在主视图模型中并以这种方式处理它吗？

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

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

---

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

您应该将模型作为主视图模型的子视图包含在内

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

---

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

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

至于绑定到ModalViewModel，您可以使用如下视图模型：

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

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

ko.applyBindings(MainViewModel.Modal);

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

ko.applyBindings(MainViewModel.Modal,modalRootElement);

---

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

至于绑定到ModalViewModel，您可以使用如下视图模型：

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

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

ko.applyBindings(MainViewModel.Modal);

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

ko.applyBindings(MainViewModel.Modal,modalRootElement);