KnockOutJS – Несколько режимов просмотра в одном представлении

Я думаю, что мое приложение становится довольно большим, слишком большим, чтобы обрабатывать каждый вид с помощью одного ViewModel.

Поэтому мне интересно, как трудно было бы создать несколько ViewModels и загрузить их все в один вид. С учетом того, что мне также нужно иметь возможность передавать данные X ViewModel в Y ViewModel, поэтому отдельные модели ViewModels должны иметь возможность общаться друг с другом или, по крайней мере, знать друг о друге.

Например, у меня есть раскрывающийся список , который выпадающее меню имеет выбранное состояние, которое позволяет мне передавать идентификатор выбранного элемента в на другой вызов Ajax в отдельной ViewModel ….

Любые моменты, связанные с многочисленными ViewModels в одном представлении, оцениваются 🙂

Если все они должны быть на одной странице, один простой способ сделать это – иметь модель основного вида, содержащую массив (или список свойств) других моделей представлений.

 masterVM = { vmA : new VmA(), vmB : new VmB(), vmC : new VmC(), } 

Тогда ваш masterVM может иметь другие свойства, если необходимо, для самой страницы. Связь между моделями просмотра не будет сложной в этой ситуации, поскольку вы могли бы передать через masterVM , или вы могли бы использовать $parent / $root в привязках или некоторые другие настраиваемые параметры.

Нокаут теперь поддерживает множественную привязку модели. Метод ko.applyBindings() принимает необязательный параметр – элемент и его потомки, к которым будет активирована привязка.

Например:

 ko.applyBindings(myViewModel, document.getElementById('someElementId')) 

Это ограничивает активацию элемента с идентификатором someElementId и его потомками.

Дополнительную информацию см. В документации .

Это мой ответ после завершения очень большого проекта с большим количеством ViewModels в одном представлении.

Просмотр Html

        
  • Container1 item
  • Item
  • Container2 item
  • Item

Для этого представления я создаю 2 модели представления для id = container1 и id = container2 в двух отдельных файлах javascript.

Container1ViewModel.js

 function Container1ViewModel() { var self = this; self.myItems = ko.observableArray(); self.myItems.push("ABC"); self.myItems.push("CDE"); } 

Container2ViewModel.js

 function Container2ViewModel() { var self = this; self.myItems = ko.observableArray(); self.myItems.push("XYZ"); self.myItems.push("PQR"); } 

Затем после того, как эти 2 режима просмотра регистрируются как отдельные режимы просмотра в DataFunction.js

 var container1VM; var container2VM; $(document).ready(function() { if ($.isEmptyObject(container1VM)) { container1VM = new Container1ViewModel(); ko.applyBindings(container1VM, document.getElementById("container1")); } if ($.isEmptyObject(container2VM)) { container2VM = new Container2ViewModel(); ko.applyBindings(container2VM, document.getElementById("container2")); } }); 

Таким образом вы можете добавить любое количество режимов просмотра для отдельных div. Но не забудьте создать отдельную модель представления для div внутри зарегистрированного div.

Проверьте плагин MultiModels для нокаута JS – https://github.com/sergun/Knockout-MultiModels

Для этого мы используем компоненты. ( http://knockoutjs.com/documentation/component-overview.html )

Например, у нас есть эта библиотека компонентов, которую мы разрабатываем: https://github.com/EDMdesigner/knobjs

Если вы вникнете в код, вы увидите, что, например, мы повторно используем компонент кнопки-кнопки в нескольких местах.

Давайте будем гением компьютера.