{"id":1109,"date":"2014-10-11T18:00:55","date_gmt":"2014-10-11T15:00:55","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1109"},"modified":"2014-10-11T17:50:20","modified_gmt":"2014-10-11T14:50:20","slug":"communicating-between-views-in-backbone","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/","title":{"rendered":"Communicating between views in Backbone"},"content":{"rendered":"<p>The backbone application that I am currently working on has a document section and a sidebar section.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-application.png\"><img decoding=\"async\" class=\"aligncenter wp-image-1200 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-application.png\" alt=\"backbone-application\" width=\"741\" height=\"505\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-application.png 741w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-application-300x204.png 300w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/a><\/p>\n<p>To represent the above structure in Backbone, I came up with following views.<\/p>\n<ol>\n<li><code>ApplicationView<\/code> &#8211; the container for the sub views.<\/li>\n<li><code>DocumentView<\/code> &#8211; represents a current document being edited\/displayed.<\/li>\n<li><code>SidebarView<\/code> &#8211; shows relevant information for the document that is there in the DocumentView.<\/li>\n<\/ol>\n<p>My top level <code>ApplicationView<\/code> is holding references to both child views &#8211; <code>DocumentView<\/code> and <code>SidebarView<\/code>. The view hierarchy is:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-view-structure.png\"><img decoding=\"async\" class=\"aligncenter wp-image-1201 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-view-structure.png\" alt=\"backbone-view-structure\" width=\"243\" height=\"210\" \/><\/a><\/p>\n<p>Now, when there is some user intraction happening in one of the child views, I need to communicate that event to the other child view. Since the child views do not know about each other (in other words, they don&#8217;t hold references to each other, unlike the Parent view which holds references to all of its child views), I need to rely on some eventing mechanism.<\/p>\n<p>After googling &amp; reading other people opinions, following are the three different approaches that I considered in order achieve this.<\/p>\n<h2>1. Using the parent view as an Event relay<\/h2>\n<p>In the first approach, I used the parent <code>ApplicationView<\/code> to relay the events between its child views. Since the parent view has reference to all its child views, its easy to relay the event through the parent.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-view-event-relay.png\"><img decoding=\"async\" class=\"aligncenter wp-image-1202 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-view-event-relay.png\" alt=\"backbone-view-event-relay\" width=\"258\" height=\"220\" \/><\/a><\/p>\n<p>The JavaScript code will be:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">var ApplicationView = Backbone.View.extend({\r\n\r\n  initialize : function(){\r\n    this.documentView = new DocumentView({parent:this});\r\n    this.sidebarView = new SidebarView({parent:this});\r\n\r\n    this.documentView.on('edit', this.documentEdited, this);\r\n  },\r\n\r\n  documentEdited : function(){\r\n    \/\/ do some stuff\r\n    this.sidebarView.trigger('documentEdit');\r\n  }\r\n\r\n});\r\n\r\nvar DocumentView = Backbone.View.extend({\r\n\r\n  onEdit : function(){\r\n    this.trigger('edit');\r\n  }\r\n\r\n});\r\n\r\nvar SidebarView = Backbone.View.extend({\r\n\r\n  initialize : function(){\r\n    this.on('documentEdit', this.onDocumentEdit, this);\r\n  },\r\n\r\n  onDocumentEdit : function(){\r\n    \/\/ react to document edit.\r\n  }\r\n\r\n});<\/pre>\n<p>But, this approach is not so effective in real. Because I had to introduce an additional event handler method <code>documentEdited()<\/code> in the <code>ApplicationView<\/code> just to pass around the events. When there are several events that I need to pass, then it will become a nightmare to add event handlers for all those events in the parent view.<\/p>\n<p>So, I looked at the second approach.<\/p>\n<h2>2. Using an EventBus to communicate between views<\/h2>\n<p>In this approach, I extended the <code>Backbone.Events<\/code> object and created an <code>EventBus<\/code> object. Then I injected this <code>EventBus<\/code> to all child views which then used to propogate events.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-event-bus.png\"><img decoding=\"async\" class=\"aligncenter wp-image-1203 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-event-bus.png\" alt=\"backbone-views-event-bus\" width=\"571\" height=\"249\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-event-bus.png 571w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-event-bus-300x130.png 300w\" sizes=\"(max-width: 571px) 100vw, 571px\" \/><\/a><\/p>\n<p>The JavaScript code for this appraoch will be:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">var ApplicationView = Backbone.View.extend({\r\n\r\n  initialize : function(){\r\n\r\n    this.eventBus = _.extend({}, Backbone.Events);\r\n\r\n    this.documentView = new DocumentView({\r\n      eventBus : this.eventBus\r\n    });\r\n    this.sidebarView = new SidebarView({\r\n      eventBus : this.eventBus\r\n    });\r\n\r\n  },\r\n\r\n});\r\n\r\nvar DocumentView = Backbone.View.extend({\r\n\r\n  initialize : function(options){\r\n    this.eventBus = options.eventBus;\r\n  },\r\n\r\n  onEdit : function(){\r\n    this.eventBus.trigger('documentEdit');\r\n  }\r\n\r\n});\r\n\r\nvar SidebarView = Backbone.View.extend({\r\n\r\n  initialize : function(options){\r\n    this.eventBus = options.eventBus;\r\n    this.eventBus.on('documentEdit', this.onDocumentEdit, this);\r\n  },\r\n\r\n  onDocumentEdit : function(){\r\n    \/\/ react to document edit.\r\n  }\r\n\r\n});<\/pre>\n<p>In this approach, I am using the <code>EventBus<\/code> object like a global event registry. If I want to views to talk between each other, I just inject the common <code>EventBus<\/code> in both of them and then trigger events\/listen to events using te <code>EventBus<\/code>.<\/p>\n<p><strong>Note<\/strong>: If you do not want a global event registry, you can still create module \/ view level event buses and share them across child modules\/views.<\/p>\n<p>This approach is much better than the first approach. But we have to manually inject the <code>EventBus<\/code> to each child views. So, there&#8217;s some room for improvement in here. Hence, the third approach.<\/p>\n<h2>3. Using Backbone as the event bus<\/h2>\n<p>In the second approach, I created a seperate event bus object, extending <code>Backbone.Events<\/code>. But later, I learned that <code>Backbone<\/code> object itself is mixed with <code>Events<\/code>. So, if I use <code>Backbone<\/code> to propogate events, I can avoid creating one more event bus.<\/p>\n<p>As an added advantage, I don&#8217;t need to manually inject <code>Backbone<\/code> into each and every sub view since it is already available.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-backbone-event-bus.png\"><img decoding=\"async\" class=\"aligncenter wp-image-1204 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-backbone-event-bus.png\" alt=\"backbone-views-backbone-event-bus\" width=\"573\" height=\"249\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-backbone-event-bus.png 573w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbone-views-backbone-event-bus-300x130.png 300w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/a><\/p>\n<p>The JavaScript implementation will be:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">var ApplicationView = Backbone.View.extend({\r\n\r\n  initialize : function(){\r\n    this.documentView = new DocumentView();\r\n    this.sidebarView = new SidebarView();\r\n  },\r\n\r\n});\r\n\r\nvar DocumentView = Backbone.View.extend({\r\n\r\n  onEdit : function(){\r\n    Backbone.trigger('documentEdit');\r\n  }\r\n\r\n});\r\n\r\nvar SidebarView = Backbone.View.extend({\r\n\r\n  initialize : function(options){\r\n    Backbone.on('documentEdit', this.onDocumentEdit, this);\r\n  },\r\n\r\n  onDocumentEdit : function(){\r\n    \/\/ react to document edit.\r\n  }\r\n\r\n});<\/pre>\n<h2>Conclusion<\/h2>\n<p>For now, I&#8217;m using the third approach, which uses the Backbone object as an event bus, in my project. IMO, this approach is somewhat cleaner than the other two (It still relies on Global <code>Backbone<\/code> object though, but it&#8217;s okay in my case).<\/p>\n<p>So, what approach would you use in your project? Feel free to share if you are following any better approaches than these to communicate between backbone views.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/veerasundar.com\/blog\/2013\/04\/communicating-between-views-in-backbone\/\">Communicating between views in Backbone<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Veera Sundar at the <a href=\"http:\/\/veerasundar.com\/blog\/\">Veera Sundar<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the above structure in Backbone, I came up with following views. ApplicationView &#8211; the container for the sub views. DocumentView &#8211; represents a current document being edited\/displayed. SidebarView &#8211; shows relevant &hellip;<\/p>\n","protected":false},"author":6,"featured_media":915,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-1109","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-backbone-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Communicating between views in Backbone - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Communicating between views in Backbone - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-11T15:00:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Veera Sundar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Veera Sundar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\"},\"author\":{\"name\":\"Veera Sundar\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0246febd1de76c75168a687d7abb14b9\"},\"headline\":\"Communicating between views in Backbone\",\"datePublished\":\"2014-10-11T15:00:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\"},\"wordCount\":765,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg\",\"articleSection\":[\"Backbone.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\",\"name\":\"Communicating between views in Backbone - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg\",\"datePublished\":\"2014-10-11T15:00:55+00:00\",\"description\":\"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Backbone.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/backbone-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Communicating between views in Backbone\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0246febd1de76c75168a687d7abb14b9\",\"name\":\"Veera Sundar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/02fcdbdd31df95e9a89687c658f225572027173dac294346eba87cbef25bb5cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/02fcdbdd31df95e9a89687c658f225572027173dac294346eba87cbef25bb5cf?s=96&d=mm&r=g\",\"caption\":\"Veera Sundar\"},\"sameAs\":[\"http:\/\/veerasundar.com\/blog\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/veera-sundar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Communicating between views in Backbone - Web Code Geeks - 2026","description":"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/","og_locale":"en_US","og_type":"article","og_title":"Communicating between views in Backbone - Web Code Geeks - 2026","og_description":"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2014-10-11T15:00:55+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg","type":"image\/jpeg"}],"author":"Veera Sundar","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Veera Sundar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/"},"author":{"name":"Veera Sundar","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0246febd1de76c75168a687d7abb14b9"},"headline":"Communicating between views in Backbone","datePublished":"2014-10-11T15:00:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/"},"wordCount":765,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg","articleSection":["Backbone.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/","name":"Communicating between views in Backbone - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg","datePublished":"2014-10-11T15:00:55+00:00","description":"The backbone application that I am currently working on has a document section and a sidebar section. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; To represent the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/backbonejs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/backbone-js\/communicating-between-views-in-backbone\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Backbone.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/backbone-js\/"},{"@type":"ListItem","position":4,"name":"Communicating between views in Backbone"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0246febd1de76c75168a687d7abb14b9","name":"Veera Sundar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/02fcdbdd31df95e9a89687c658f225572027173dac294346eba87cbef25bb5cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/02fcdbdd31df95e9a89687c658f225572027173dac294346eba87cbef25bb5cf?s=96&d=mm&r=g","caption":"Veera Sundar"},"sameAs":["http:\/\/veerasundar.com\/blog\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/veera-sundar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1109\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/915"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}