一个 Knockout.JS ViewModel 中的多个数组

Question

我遇到了必须在同一个视图中使用多个 ViewModel 的情况。我通过使用这种允许在 DOM 的不同项上进行多个绑定的技巧来实现这一点：

ko.applyBindings(supervisors, $('#supervisorContainer')[0]);
ko.applyBindings(permits, $('#permitContainer')[0]);

在以前的视图中，我只需要绑定一个迷你对象，例如 PeopleModel。现在随着其他页面变得越来越复杂，我觉得更好的方法是将这些较小的模型封装在较大的主模型中作为数组。我还没有看到任何这样的例子，所以假设我们有一个项目。在这个项目中有许多主管和许多许可证。主管和许可是可观察的数组。现在我将它们都作为自己的模型，但从概念上讲，将唯一的模型作为 ProjectModel，然后将 Supervisors 和 Permits 作为该模型内部的数组可能更有意义。

使用来自 Knockout.JS 网站的示例，我看不出如何将这样的东西转换为内部包含多个数组的 ProjectModel，主要是因为语言，例如如何将 gifts 传递给函数。

var GiftModel = function(gifts) {
    var self = this;
    self.gifts = ko.observableArray(gifts);

    self.addGift = function() {
        self.gifts.push({
            name: "",
            price: ""
        });
    };

    self.removeGift = function(gift) {
        self.gifts.remove(gift);
    };
};

var viewModel = new GiftModel([
    // Data goes in here 
]);
ko.applyBindings(viewModel);

这种思维方式正确吗？或者，还有更好的方法？以下代码实际上似乎与我在视图中的 foreach 循环一起工作：

var ProjectModel = function(supervisors, permits) {
    var self = this;
    self.supervisors = ko.observableArray(supervisors);
    self.permits = ko.observableArray(permits);

    self.addPermit = function() {
        self.permits.push({
            number: "",
            date: ""
        });
    };

    self.removePermit = function(permit) {
        self.permits.remove(permit);
    };

    self.addSupervisor = function() {
        self.supervisors.push({
            name: "",
            number: ""
        });
    };

    self.removeSupervisor = function(supervisor) {
        self.supervisors.remove(supervisor);
    };

};

var viewModel = new ProjectModel(supervisorJSONArray,permitJSONArray);
ko.applyBindings(viewModel);

Answer 1

您确实将两个视图模型“融合”在一起......相反，我会将它们“合成”在一起，如下所示：

var PermitsViewModel = function(permits) {
    // Permits functionality and observables here
}
var SupervisorsViewModel = function(supervisors) {
    // Supervisors functionality and observables here
}

var ProjectModel = function(supervisors, permits) {
    var self = this;
    self.supervisorsViewModel = new SupervisorsViewModel(supervisors);
    self.permitsViewModel = new PermitsViewModel(permits);

};

var viewModel = new ProjectModel(supervisorJSONArray,permitJSONArray);
ko.applyBindings(viewModel);

然后您可以在视图中使用“with”语句来引用适当的视图模型。