backbone: update

backbone.md

@@ -1,35 +1,51 @@
+---
 title: Backbone.js
+layout: 2017/sheet
+updated: 2017-09-04
 ---
 
 ### Binding events
 
-    .on('event', callback);
+```js
-    .on('event', callback, context);
+.on('event', callback)
+.on('event', callback, context)
+```
 
-    .on({
+```js
-      'event1': callback,
+.on({
-      'event2': callback
+  'event1': callback,
-    });
+  'event2': callback
+})
+```
 
-    .on('all', callback);
+```js
+.on('all', callback)
+```
 
-    .once('event', callback);   /* Only happens once */
+```js
+.once('event', callback)   // Only happens once
+```
 
 ### Unbinding events
 
-    
+```js
-    object.off("change", onChange);    // just the `onChange` callback
+object.off('change', onChange)    // just the `onChange` callback
-    object.off("change");              // all "change" callbacks
+object.off('change')              // all 'change' callbacks
-    object.off(null, onChange);        // `onChange` callback for all events
+object.off(null, onChange)        // `onChange` callback for all events
-    object.off(null, null, context);   // all callbacks for `context` all events
+object.off(null, null, context)   // all callbacks for `context` all events
-    object.off();                      // all
+object.off()                      // all
+```
 
 ### Events
 
-    object.trigger('event')
+```js
+object.trigger('event')
+```
 
-    view.listenTo(object, event, callback)
+```js
-    view.stopListening()
+view.listenTo(object, event, callback)
+view.stopListening()
+```
 
 ### List of events
 
@@ -55,126 +71,194 @@ title: Backbone.js
 
 ### Views
 
-    // All attributes are optional
+```js
-    var View = Backbone.View.extend({
+// All attributes are optional
-      model: doc,
+var View = Backbone.View.extend({
+  model: doc,
+```
 
-      tagName: 'div',
+```js
-      className: 'document-item',
+  tagName: 'div',
-      id: "document-" + doc.id,
+  className: 'document-item',
-      attributes: { href: '#' },
+  id: "document-" + doc.id,
+  attributes: { href: '#' },
+```
 
-      el: 'body',
+```js
+  el: 'body',
+```
 
-      events: {
+```js
-        'click button.save': 'save',
+  events: {
-        'click .cancel': function() { ... },
+    'click button.save': 'save',
-        'click': 'onclick'
+    'click .cancel': function() { ··· },
-      },
+    'click': 'onclick'
+  },
+```
 
-      constructor: function() { ... },
+```js
-      render: function() { ... }
+  constructor: function() { ··· },
-    });
+  render: function() { ··· }
+})
+```
 
-    view = new View();
+```js
-    view = new View({ el: ... });
+view = new View()
+view = new View({ el: ··· })
+```
 
-    view.$el.show();
+```js
-    view.$("input");
+view.$el.show()
+view.$("input")
+```
 
-    view.remove();
+```js
+view.remove()
+```
 
-    view.delegateEvents();
+```js
-    view.undelegateEvents();
+view.delegateEvents()
+view.undelegateEvents()
+```
 
-### Model
+## Models
 
-    // All attributes are optional
+### Defining
-    var Model = Backbone.Model.extend({
-      defaults: {
-        'author': 'unknown'
-      },
-      idAttribute: '_id',
-      parse: function() {
-      }
-    });
 
-    var obj = new Model({ title: "Lolita", author: "Nabokov" });
+```js
+// All attributes are optional
+var Model = Backbone.Model.extend({
+  defaults: {
+    'author': 'unknown'
+  },
+  idAttribute: '_id',
+  parse: function() { ··· }
+})
+```
 
-    var obj = new Model({ collection: ... });
+### Instanciating
 
-    obj.id
+```js
-    obj.cid   //=> "c38" (client-side ID)
+var obj = new Model({ title: 'Lolita', author: 'Nabokov' })
+```
 
-    obj.clone()
+```js
+var obj = new Model({ collection: ··· })
+```
 
-    obj.hasChanged('title')
+### Methods
-    obj.changedAttributes()  /* false, or hash */
-    obj.previousAttributes() /* false, or hash */
-    obj.previous('title')
 
-    obj.isNew()
+```js
+obj.id
+obj.cid   // → 'c38' (client-side ID)
+```
 
-    obj.set({ title: 'A Study in Pink' });
+```js
-    obj.set({ title: 'A Study in Pink' }, { validate: true, silent: true });
+obj.clone()
-    obj.unset('title')
+```
 
-    obj.get('title')
+```js
-    obj.has('title')
+obj.hasChanged('title')
-    obj.escape('title')     /* Like .get() but HTML-escaped */
+obj.changedAttributes()  // false, or hash
+obj.previousAttributes() // false, or hash
+obj.previous('title')
+```
 
-    obj.clear()
+```js
-    obj.clear({ silent: true })
+obj.isNew()
+```
 
-    obj.save()
+```js
-    obj.save({ attributes })
+obj.set({ title: 'A Study in Pink' })
-    obj.save(null, {
+obj.set({ title: 'A Study in Pink' }, { validate: true, silent: true })
-      silent: true, patch: true, wait: true,
+obj.unset('title')
-      success: callback, error: callback
+```
-    })
 
-    obj.destroy()
+```js
-    obj.destroy({
+obj.get('title')
-      wait: true,
+obj.has('title')
-      success: callback, error: callback
+obj.escape('title')     /* Like .get() but HTML-escaped */
-    })
+```
 
-    obj.toJSON()
+```js
+obj.clear()
+obj.clear({ silent: true })
+```
 
-    obj.fetch()
+```js
-    obj.fetch({ success: callback, error: callback })
+obj.save()
+obj.save({ attributes })
+obj.save(null, {
+  silent: true, patch: true, wait: true,
+  success: callback, error: callback
+})
+```
 
-### Model: validation
+```js
+obj.destroy()
+obj.destroy({
+  wait: true,
+  success: callback, error: callback
+})
+```
 
-    var Model = Backbone.Model.extend({
+```js
-      validate: function(attrs, options) {
+obj.toJSON()
-        if (attrs.end < attrs.start) {
+```
-          return "Can't end before it starts";
-        }
-      }
-    });
 
-    obj.validationError  //=> "Can't end before it starts"
+```js
-    obj.isValid()
+obj.fetch()
-    obj.on('invalid', function(model, error) { ... })
+obj.fetch({ success: callback, error: callback })
+```
 
-    // Triggered on:
+### Validation
-    obj.save()
-    obj.set({...}, { validate: true })
 
-### Model: custom URLs
+```js
+var Model = Backbone.Model.extend({
+  validate: function(attrs, options) {
+    if (attrs.end < attrs.start) {
+      return 'Can't end before it starts'
+    }
+  }
+})
+```
+{: data-line="2"}
 
-    var Model = Backbone.Model.extend({
+```js
-      // Single URL (string or function)
+obj.validationError  //=> 'Can't end before it starts'
-      url: '/account',
+obj.isValid()
-      url: function() { return '/account'; },
+obj.on('invalid', function (model, error) { ··· })
+```
 
-      // Both of these two work the same way
+```js
-      url: function() { return '/books/' + this.id }),
+// Triggered on:
-      urlRoot: '/books'
+obj.save()
-    });
+obj.set({ ··· }, { validate: true })
+```
 
-    var obj = new Model({ url: ... });
+### Custom URLs
-    var obj = new Model({ urlRoot: ... });
 
+```js
+var Model = Backbone.Model.extend({
+  // Single URL (string or function)
+  url: '/account',
+  url: function() { return '/account' },
+```
 
+```js
+  // Both of these two work the same way
+  url: function() { return '/books/' + this.id }),
+  urlRoot: '/books'
+})
+```
+
+```js
+var obj = new Model({ url: ··· })
+var obj = new Model({ urlRoot: ··· })
+```
+
+## References
+{: .-one-column}
+
+- [Backbone website](http://backbonejs.org/) _(backbonejs.org)_
+- [Backbone patterns](http://ricostacruz.com/backbone-patterns/) _(ricostacruz.com)_