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

Question

我有一个主ViewModel和我的视图很棒，我有一个模态窗口（fancybox），有一些非常复杂的流程（因为你将在该模型中经历3个步骤）。

现在我已经为此创建了一个新的ViewModel，而不是将主要的ViewModel弄为其关注点。因此，我们分别称他们为MainViewModel，ModalViewModel。

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

所以我想也许我应该尝试使用ajax将模板注入fancybox窗口。

总结一下这个流程：

1. 用户进入主视图
2. 用户点击产生模态窗口的链接
3. 用户以模态填写表格
4. 用户点击提交模式
5. 用户进入模态表格的第二阶段
6. 用户在模态
中填写表单2
7. 用户提交表单
8. 用户被发送到新页面

所以我正确地走这条路吗？或者我应该将MainViewModel中的ModalViewModel作为子viewModel包含并以这种方式处理它？<​​/ p>

Answer 1

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

就绑定到ModalViewModel而言，你可以拥有一个像这样的ViewModel：

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

然后将applybindings应用于childViewModel 像这样：

ko.applyBindings(MainViewModel.Modal);

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

ko.applyBindings(MainViewModel.Modal,modalRootElement);

Answer 2

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

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

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