在一个Knockout.JS视图模型的多个阵列(Multiple arrays in one Kno

2019-10-22 14:50发布

我遇到了在那里我有在同一视图中使用多的ViewModels的情况。 我实现了通过使用这种伎俩,它允许对DOM的不同项目的多个绑定的:

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

在以前的观点,我只需要绑定一个小物体,比如PeopleModel。 现在,当其他页面变得越来越复杂,我觉得好像更好的方式来做到这将是封装大主力机型为阵列内这些小模型。 我还没有看到这个局面的任何例子,让我们说我们有一个项目。 在这个项目中有许多监事和许多许可证。 主管和许可证是可观察到的阵列。 现在,我有他们每一个都为自己的模式,但在概念上它可能作出的唯一模式是ProjectModel,然后有监事和许可证为模型的内部阵列更有意义。

使用权从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:

你真的“融合在一起”两个共同的ViewModels而不是...我将“复合”在一起,这样的事情:

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

然后,您可以使用“与”语句在视图中引用相应的视图模型。



文章来源: Multiple arrays in one Knockout.JS ViewModel