Knockout.js - 每页多个ViewModels;具有不同模型上下文的页面范围的函数

时间:2013-05-14 16:00:11

标签: knockout.js knockout-2.0

我正在构建一个包含多个表单的大页面,用户将按顺序填写。

我想让每个部分都成为自己的模型,并且计划使用一个导入子模型的masterViewModel。

然而,每个部分都有编辑&保存具有相同功能的按钮:

  1. 编辑将模型切换为编辑模式
  2. 保存验证输入,保存数据(通过ajax),并切换模型的状态
  3. 按钮组之间的唯一区别是它们的模型上下文。

    我在制作页面级保存时遇到问题。编辑可以使用masterViewModel / subViewModels引用不同模型的函数。

    有人对此有任何指导吗?

    感谢。

1 个答案:

答案 0 :(得分:6)

如果你的根视图模型有一个函数,那么你可以从click: $root.save这样的任何地方调用它。

当Knockout调用该函数时,它会将上下文(this)设置为当前数据,并将其作为第一个参数传递。因此,第一个参数将包含您当前的模型,您可以从那里处理它。

以下是一个示例:http://jsfiddle.net/rniemeyer/v22gd/

var viewModel = {
    one: {
        name: ko.observable("Bob")   
    },
    two: { 
        name: ko.observable("Sue")
    },
    save: function(model) {
        alert(ko.toJSON(model));
    }
};

ko.applyBindings(viewModel);

标记如:

<div data-bind="with: one">
    <input data-bind="value: name" />
    <button data-bind="click: $root.save">Save</button>
</div>

<div data-bind="with: two">
    <input data-bind="value: name" />
    <button data-bind="click: $root.save">Save</button>
</div>