{"id":232,"date":"2013-04-03T19:37:16","date_gmt":"2013-04-03T19:37:16","guid":{"rendered":"http:\/\/www.webninjataylor.com\/library\/?p=232"},"modified":"2014-06-24T21:39:42","modified_gmt":"2014-06-24T21:39:42","slug":"backbone-js-basics","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/backbone-js-basics\/","title":{"rendered":"Backbone.js Basics"},"content":{"rendered":"<h2>Overview<\/h2>\n<ul>\n<li><strong>Views observe Models<\/strong><\/li>\n<li>The traditional controller role is performed by the template, not by the Backbone View<\/li>\n<li>Model persistence is the storage and synchronization of data<\/li>\n<li>A group of Models is a Collection<\/li>\n<li>A Model or Collection may have multiple Views observing it for changes<\/li>\n<li>Collections are useful for performing any aggregate computations across more than one model<\/li>\n<li>Underscore.js is a\u00a0JavaScript templating engine used by render() for the Model<\/li>\n<li>Add\u00a0<span class=\"code\">render()<\/span>\u00a0callback as a Model subscriber, so the View can be triggered to update when the Model changes<\/li>\n<\/ul>\n<h2>Templating<\/h2>\n<p>JavaScript templating libraries (such as Underscore, Mustache, or Handlebars.js) are often used to define templates for Views as HTML markup containing template variables. These template blocks can either be stored externally or within script tags with a custom type (e.g\u00a0<q>text\/template<\/q>). Variables are delimited using a variable syntax (e.g\u00a0<code>&lt;%= title %&gt;<\/code>\u00a0for Underscore and\u00a0<code>{{title}}<\/code>\u00a0for Handlebars).<\/p>\n<h2>Routers<\/h2>\n<p>In classical web development, navigating between independent views required the use of a page refresh. In single-page JavaScript applications, however, once\u00a0data is fetched from a server via Ajax, it can be dynamically rendered in a new view within the same page. Since this doesn\u2019t automatically update the URL, the role of navigation thus falls to a\u00a0<q>router<\/q>, which assists in managing application state (e.g., allowing users to bookmark a particular view they have navigated to). Routers are neither a part of MVC nor present in every MVC-like framework.<\/p>\n<h2>Controllers<\/h2>\n<p>Backbone\u2019s Views typically contain\u00a0<q>Controller<\/q>\u00a0logic, and Routers are used to help manage application state, but neither are true Controllers according to classical MVC.<\/p>\n<h2 id=\"fast-facts\">Fast Facts<\/h2>\n<ul>\n<li>Core components: Model, View, Collection, Router. Enforces its own flavor of MV*<\/li>\n<li>Event-driven communication between Views and Models. It\u2019s relatively straight-forward to add event listeners to any attribute in a Model, giving developers fine-grained control over what changes in the View<\/li>\n<li>Supports data bindings through manual events or a separate Key-value observing (KVO) library<\/li>\n<li>Support for RESTful interfaces out of the box, so Models can be easily tied to a backend<\/li>\n<li>Extensive eventing system. It\u2019s\u00a0<a href=\"http:\/\/lostechies.com\/derickbailey\/2011\/07\/19\/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js\/\" target=\"_blank\">trivial<\/a>\u00a0to add support for pub\/sub in Backbone<\/li>\n<li>Prototypes are instantiated with the\u00a0<span class=\"code\">new<\/span>\u00a0keyword, which some developers prefer<\/li>\n<li>Agnostic about templating frameworks, however Underscore\u2019s micro-templating is available by default<\/li>\n<li>Clear and flexible conventions for structuring applications; Backbone doesn\u2019t force usage of all of its components and can work with only those needed<\/li>\n<\/ul>\n<h2>Nuggets<\/h2>\n<ul>\n<li>myModel.toJSON() method returns a copy of the model&#8217;s attributes as an <strong>object<\/strong><\/li>\n<li>JSON.stringify(myModel) returns the model&#8217;s attributes as a <strong>string<\/strong><\/li>\n<li><strong>Model.get<\/strong>(&#8216;attribute&#8217;) &#8230; <strong>Model.set<\/strong>(&#8216;attribute&#8217;, &#8216;value'[, repeat]) &#8230;\u00a0<strong>Model.unset<\/strong>(&#8216;attribute&#8217;)<\/li>\n<li>You can bypass triggers bound to a model&#8217;s change events by using the model&#8217;s .attributes attribute<strong> {silent: true}<\/strong><\/li>\n<li>Bind change event listeners for models in the initialize() function with\u00a0<strong>myModel.on(&#8216;change&#8217;, CALLBACK)<\/strong> or listen for changes to specific attributes with\u00a0myModel.on(&#8216;change:ATTRIBUTE&#8217;, CALLBACK)<\/li>\n<li>You can also validate models with something like <strong>myModel.validate<\/strong> = function(attrs){if(!attrs.name){return &#8216;Name Required&#8217;;}};<\/li>\n<li>A view&#8217;s<strong> render()<\/strong> method can be bound to a model&#8217;s change() event, enabling the view to instantly reflect model changes<\/li>\n<li><strong>el:<\/strong> &#8216;CSS-SELECTOR&#8217;<\/li>\n<li>You can think of <strong>models<\/strong> as individual items in a To Do list, and a <strong>collection<\/strong> is the list of items<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview Views observe Models The traditional controller role is performed by the template, not by the Backbone View Model persistence is the storage and synchronization of data A group of Models is a Collection A Model or Collection may have multiple Views observing it for changes Collections are useful for performing any aggregate computations across [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[45,9],"class_list":["post-232","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-backbone-js","tag-javascript"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":30,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":3382,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/232\/revisions\/3382"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}