Я столкнулся с тем случаем, когда мне нужно использовать несколько ViewModels в одном представлении. Я достиг этого, используя этот трюк, который позволяет несколько привязок к различным элементам DOM:
ko.applyBindings(supervisors, $('#supervisorContainer')[0]); ko.applyBindings(permits, $('#permitContainer')[0]); В предыдущих представлениях мне нужно было привязать только один мини-объект, например PeopleModel. Теперь, когда другие страницы становятся все более сложными, мне кажется, что лучший способ сделать это – это инкапсулировать эти более мелкие модели внутри большей основной модели в виде массивов. Я не видел никаких примеров этого, так что, скажем, у нас есть проект. В этом проекте есть много супервизоров и много разрешений. Наблюдатели и разрешения являются наблюдаемыми массивами. Прямо сейчас у меня есть они оба как их собственная модель, но концептуально может быть больше смысла для одной и единственной модели быть ProjectModel, а затем иметь Supervisors и Permits в качестве массивов внутри этой модели.
Используя пример с сайта 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);