Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/402.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 一个Knockout.JS ViewModel中包含多个数组_Javascript_Php_Arrays_Knockout.js - Fatal编程技术网

Javascript 一个Knockout.JS ViewModel中包含多个数组

Javascript 一个Knockout.JS ViewModel中包含多个数组,javascript,php,arrays,knockout.js,Javascript,Php,Arrays,Knockout.js,我遇到了在同一视图中必须使用多个ViewModels的情况。通过使用这种允许对DOM的不同项进行多个绑定的技巧,我实现了这一点: ko.applyBindings(supervisors, $('#supervisorContainer')[0]); ko.applyBindings(permits, $('#permitContainer')[0]); 在以前的视图中,我只需要绑定一个小对象,就像PeopleModel一样。现在,随着其他页面变得越来越复杂,我觉得更好的方法是将这些较小的模型

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

ko.applyBindings(supervisors, $('#supervisorContainer')[0]);
ko.applyBindings(permits, $('#permitContainer')[0]);
在以前的视图中,我只需要绑定一个小对象,就像PeopleModel一样。现在,随着其他页面变得越来越复杂,我觉得更好的方法是将这些较小的模型封装在较大的主模型中作为数组。我还没有看到任何这样的例子,所以假设我们有一个项目。在该项目中,有许多监督员和许可证。管理者和许可证是可观察的阵列。现在我将它们都作为自己的模型,但从概念上讲,唯一的模型应该是ProjectModel,然后在该模型中有监管者和许可证作为数组

使用Knockout.JS网站上的一个例子,我看不出这样的东西是如何被转换成内部有多个数组的ProjectModel的,主要是因为语言,比如如何将
礼物
传递给函数

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

你真的把两个视图模型“融合”在一起了。。。相反,我会将它们“组合”在一起,类似这样:

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”语句来引用适当的视图模型。

听起来您是在寻求有关设计决策的帮助,这有点超出了本网站的范围。也就是说,如果监管机构和许可证之间存在某种关联,那么在一个视图模型中保留两个可观测阵列是有意义的。在我看来,这当然是理想的。但是,在访问和操作子对象时遇到了挑战,如图所示
http://jsfiddle.net/zhLf1n61/
这是一个微妙的不同问题……在创建单独的视图模型和对象模型之间存在着张力。在这种情况下,这些是嵌套对象。。。在我看来,在这种情况下,您不需要单独的视图模型。在这个许可证/监管人的案例中,你也可以这么说。。。重点是封装字段和方法所属的位置。jsfiddle.net/brettwgreen/zhLf1n61/2I将使用单独的视图模型,然后当我在一个页面上获得了一些小部件,这些小部件实际上并没有相互交互时,将它们组合起来。