JavaScript — несколько массивов в одном Knockout.JS ViewModel

Я столкнулся с случаем, когда мне приходится использовать несколько 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);

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 в представлении для ссылки на соответствующую модель представления.

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]