Я столкнулся с случаем, когда мне приходится использовать несколько 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);
Вы действительно «слили» две модели представления вместе … вместо этого я бы «скомбинировал» их вместе, что-то вроде этого:
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 в представлении для ссылки на соответствующую модель представления.
Других решений пока нет …