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

Question

我遇到过必须在同一 View 中使用多个 ViewModel 的情况。我通过使用这种允许在 DOM 的不同项目上进行多个绑定(bind)的技巧来实现这一点:

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

在之前的 View 中，我只需要绑定(bind)一个迷你对象，例如 PeopleModel。现在，随着其他页面变得越来越复杂，我觉得更好的方法是将这些较小的模型封装在较大的主模型中作为数组。我还没有看到任何这样的例子，所以假设我们有一个项目。在这个项目中，有很多主管人员和很多许可证。主管和许可证是可观察的数组。现在，我将它们分别作为自己的模型，但从概念上讲，将唯一的模型作为 ProjectModel，然后将 Supervisor 和 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);

这种思维方式正确吗？或者，还有更好的方法？以下代码实际上似乎适用于 View 中的 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

您确实将两个 View 模型“融合”在一起......相反，我会将它们“复合”在一起，如下所示:

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);

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