在一个Knockout.JS视图模型多个阵列 [英] Multiple arrays in one Knockout.JS ViewModel

问题描述

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

  ko.applyBindings（监事，$（'＃supervisorContainer'）[0]）;
ko.applyBindings（许可证，$（'＃permitContainer'）[0]）;
 

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

使用权从Knockout.JS网站一个例子，我看不出这样的事情可能会被转换为与内部多个阵列一个ProjectModel，主要是因为语言，比如如何礼品被传递给函数。

  VAR GiftModel =功能（礼品）{
    VAR自我=这一点;
    self.gifts = ko.observableArray（礼品）;    self.addGift =功能（）{
        self.gifts.push（{
            名称： ，
            价钱： 
        }）;
    };    self.removeGift =功能（礼品）{
        self.gifts.remove（礼品）;
    };
};VAR视图模型=新GiftModel（[
    //数据将进入这里
]）;
ko.applyBindings（视图模型）;
 

是一种思维正确的这种方式？还是有更好的办法？下面code实际上确实似乎与视图我foreach循环的工作：

  VAR ProjectModel =功能（监事，许可证）{
    VAR自我=这一点;
    self.supervisors = ko.observableArray（监事）;
    self.permits = ko.observableArray（证）;    self.addPermit =功能（）{
        self.permits.push（{
            号：，
            日期：
        }）;
    };    self.removePermit =功能（许可）{
        self.permits.remove（证）;
    };    self.addSupervisor =功能（）{
        self.supervisors.push（{
            名称： ，
            号：
        }）;
    };    self.removeSupervisor =功能（主管）{
        self.supervisors.remove（导师）;
    };};VAR视图模型=新ProjectModel（supervisorJSONArray，permitJSONArray）;
ko.applyBindings（视图模型）;
 

解决方案

你真的'融合在一起两个共同的ViewModels而不是...我会复合在一起，这样的事情：

  VAR PermitsViewModel =功能（许可证）{
    //允许功能和观测位置
}
VAR SupervisorsViewModel =功能（监事）{
    //监事功能和这里观测
}VAR ProjectModel =功能（监事，许可证）{
    VAR自我=这一点;
    self.supervisorsViewModel =新SupervisorsViewModel（监事）;
    self.permitsViewModel =新PermitsViewModel（证）;};VAR视图模型=新ProjectModel（supervisorJSONArray，permitJSONArray）;
ko.applyBindings（视图模型）;
 

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

I have run into the case where I am having to use multiple ViewModels in the same view. I achieved that by using this kind of trick which allows multiple bindings on different items of the DOM:

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

On previous views, I only had to bind one mini object, like a PeopleModel. Now as other pages are getting more complex, I feel as though the better way to do it would be to encapsulate these smaller models inside of the larger main model as arrays. I haven't seen any examples of this around, so let's say we have a project. In this project there are many supervisors and many permits. Supervisors and permits are observable arrays. Right now I have them each both as their own model, but conceptually it might make more sense for the one and only model to be the ProjectModel, and then to have Supervisors and Permits as arrays inside of that model.

Using an example right from the Knockout.JS website, I don't see how something like this could be converted to be a ProjectModel with multiple arrays inside, mainly because of the language, such as how gifts are passed to the function.

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

Is this way of thinking correct? Or is there a better way? The following code does actually seem to work with my foreach loops in the view:

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

解决方案

You've really 'melded' the two viewModels together... instead I would 'composite' them together, something like this:

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

You could then use 'with' statements in the view to reference the appropriate view model.

这篇关于在一个Knockout.JS视图模型多个阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！