В предыдущей статье я познакомил вас с вашим опытом обучения передачи ценностей между взглядами в магистрали. Эта статья посвящена введению трех способов общения между взглядами на основу.
Наиболее важным разделом для освоения структуры MVC является освоение того, как общаться между различными взглядами. Когда я раньше использовал Angular, я думал, что методы общения на основе событий ($ on, $ Emit, $ board) или методы, основанные на обслуживании, были очень полезными. После перехода на основу, из -за недостаточного понимания механизма событий и очень гибкого использования Backbone, хороший метод связи не был найден. Пока я не увидел эту статью, автор использовал простой пример, чтобы ясно объяснить три способа общения между взглядами на основу. Перевод заключается в следующем:
Веб -страница, которую я разрабатываю, имеет две основные части, а именно документ и боковая панель.
Как показано на рисунке выше, я установил три просмотра:
ApplicationView - содержит нижнее представление в качестве самого внешнего представления
DocumentView - показывает отредактированный или просмотр контента
Sidebarview - Покажите некоторую информацию, связанную с документами
DocumentView и Shidebarview являются подвесками ApplicationView, поэтому общая структура представления показана на рисунке ниже:
Пользователь работает в любом подвесе, а другой подвет должен быть изменен соответствующим образом. Но поскольку два взгляда ребенка не могут напрямую уведомить другую сторону (то есть их прицелы не связаны напрямую, в отличие от родительского взгляда, который может содержать область всех его детей), мне нужен механизм событий.
После того, как я погуглил и имел в виду методы других людей, я суммировал следующие три различных способа общения.
1. Пропустить события через родительский вид
Я прохожу события для двух детей ребенка через родительское представление (ApplicationView). Поскольку родительский вид содержит объем всех своих детей, лучше всего использовать его в качестве среды для доставки событий.
Код JavaScript выглядит следующим образом:
var ApplicationView = backbone.view.extend ({initiaze: function () {this.documentView = new DocumentView ({Parent: this}); this.sidebarview = new Sidebarview ({parent: this}); this.documentview.on (redit ', this.documenteded, это); phiteThis.sidebarview.trigger ('docmentedit');}}); var documentView = backbone.view.extend ({onedit: function () {this.trigger ('edit');}}); var sidebarview = backbone.view.extend ({initize: function (). это);}, ondocumentedit: function () {// реагировать на документ редактирование.}});Однако этот метод не эффективен. Потому что мне нужно добавить дополнительный обработчик событий в ApplicationView Doccordated (). Если в представлении дочерних событий проходит куча событий, функция обработчика событий будет постоянно запускаться в родительском представлении, что приведет к тому, что она будет перегружена.
Тогда давайте посмотрим на второй метод.
2. Связь между взглядами через Eventbus
Я создаю глобальный объект Eventbus, унаследовав Backbone.events. Введите его в каждый подвет для трансляции событий.
Код JavaScript выглядит следующим образом:
var ApplicationView = backbone.view.extend ({initiaze: function () {this.eventbus = _.extend ({}, backbone.events); this.documentview = new DocumentView ({eventbus: this.eventbus}); this.sidebarview = new sactbarview (eventbus: eventbus: eventbus: eventbus}); this.sidebarview = new Sidebarview: this.eventbus});},}); var documentView = backbone.view.extend ({initiaze: function (options) {this.eventbus = опции. function (options) {this.eventbus = options.eventbus; this.eventbus.on ('domployedit', this.ondocumentedit, this);}, ondocumentedit: function () {// реагировать на документ Edit.}});В этом методе я использую Eventbus в качестве глобального объекта для регистрации событий. Если я хочу общаться между взглядами, мне просто нужно внедрить Eventbus в представление, и я могу легко запустить или слушать события через это.
ПРИМЕЧАНИЕ. Если вы не хотите создавать глобальные объекты, вы все равно можете создавать Eventbus на уровне модуля или просмотра для общения.
Этот метод уже значительно лучше, чем первый метод. Тем не менее, нам нужно вручную ввести Eventbus в подвиде, который показывает, что все еще есть место для улучшения. Итак, давайте посмотрим на третий метод.
3. Используйте основу непосредственно в качестве машины регистрации событий
Во втором методе я создаю отдельный бибус, унаследованный от Backbone.events. Но недавно я понял, что сам объект Backbone - это объект, который смешивает события, поэтому я напрямую использую магистраль для трансляции событий, поэтому мне не нужно создавать еще один биографический стол.
И объект магистрали можно назвать напрямую, поэтому мне не приходится вручную вводить его в каждый подвет.
Код JavaScript выглядит следующим образом:
var ApplicationView = backbone.view.extend ({initiaze: function () {this.documentView = new DocumentView (); this.SideBarview = new SidebarView ();},}); var DocumentView = Backbone.View.extend ({onEdit: function () {backbone.trigger ('documentTIT'); = Backbone.view.extend ({initiaze: function (options) {backbone.on ('doccordedit', this.ondocumentedit, this);}, ondocumentedit: function () {// реагировать на документ редактирование.}});Суммировать
Я закончил тем, что использовал третий метод в моем проекте. И, на мой взгляд, хотя он напрямую зависит от глобального объекта магистрали, он чрезвычайно кратко использовать.