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
+.on({
   '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
+var View = Backbone.View.extend({
   model: doc,
+```
 
+```js
   tagName: 'div',
   className: 'document-item',
   id: "document-" + doc.id,
   attributes: { href: '#' },
+```
 
+```js
   el: 'body',
+```
 
+```js
   events: {
     'click button.save': 'save',
-        'click .cancel': function() { ... },
+    '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({
+
+```js
+// All attributes are optional
+var Model = Backbone.Model.extend({
   defaults: {
     'author': 'unknown'
   },
   idAttribute: '_id',
-      parse: function() {
+  parse: function() { ··· }
-      }
+})
-    });
+```
 
-    var obj = new Model({ title: "Lolita", author: "Nabokov" });
+### Instanciating
 
-    var obj = new Model({ collection: ... });
+```js
+var obj = new Model({ title: 'Lolita', author: 'Nabokov' })
+```
 
-    obj.id
+```js
-    obj.cid   //=> "c38" (client-side ID)
+var obj = new Model({ collection: ··· })
+```
 
-    obj.clone()
+### Methods
 
-    obj.hasChanged('title')
+```js
-    obj.changedAttributes()  /* false, or hash */
+obj.id
-    obj.previousAttributes() /* false, or hash */
+obj.cid   // → 'c38' (client-side ID)
-    obj.previous('title')
+```
 
-    obj.isNew()
+```js
+obj.clone()
+```
 
-    obj.set({ title: 'A Study in Pink' });
+```js
-    obj.set({ title: 'A Study in Pink' }, { validate: true, silent: true });
+obj.hasChanged('title')
-    obj.unset('title')
+obj.changedAttributes()  // false, or hash
+obj.previousAttributes() // false, or hash
+obj.previous('title')
+```
 
-    obj.get('title')
+```js
-    obj.has('title')
+obj.isNew()
-    obj.escape('title')     /* Like .get() but HTML-escaped */
+```
 
-    obj.clear()
+```js
-    obj.clear({ silent: true })
+obj.set({ title: 'A Study in Pink' })
+obj.set({ title: 'A Study in Pink' }, { validate: true, silent: true })
+obj.unset('title')
+```
 
-    obj.save()
+```js
-    obj.save({ attributes })
+obj.get('title')
-    obj.save(null, {
+obj.has('title')
+obj.escape('title')     /* Like .get() but HTML-escaped */
+```
+
+```js
+obj.clear()
+obj.clear({ silent: true })
+```
+
+```js
+obj.save()
+obj.save({ attributes })
+obj.save(null, {
   silent: true, patch: true, wait: true,
   success: callback, error: callback
-    })
+})
+```
 
-    obj.destroy()
+```js
-    obj.destroy({
+obj.destroy()
+obj.destroy({
   wait: true,
   success: callback, error: callback
-    })
+})
+```
 
-    obj.toJSON()
+```js
+obj.toJSON()
+```
 
-    obj.fetch()
+```js
-    obj.fetch({ success: callback, error: callback })
+obj.fetch()
+obj.fetch({ success: callback, error: callback })
+```
 
-### Model: validation
+### Validation
 
-    var Model = Backbone.Model.extend({
+```js
+var Model = Backbone.Model.extend({
   validate: function(attrs, options) {
     if (attrs.end < attrs.start) {
-          return "Can't end before it starts";
+      return 'Can't end before it starts'
     }
   }
-    });
+})
+```
+{: data-line="2"}
 
-    obj.validationError  //=> "Can't end before it starts"
+```js
-    obj.isValid()
+obj.validationError  //=> 'Can't end before it starts'
-    obj.on('invalid', function(model, error) { ... })
+obj.isValid()
+obj.on('invalid', function (model, error) { ··· })
+```
 
-    // Triggered on:
+```js
-    obj.save()
+// Triggered on:
-    obj.set({...}, { validate: true })
+obj.save()
+obj.set({ ··· }, { validate: true })
+```
 
-### Model: custom URLs
+### Custom URLs
 
-    var Model = Backbone.Model.extend({
+```js
+var Model = Backbone.Model.extend({
   // Single URL (string or function)
   url: '/account',
-      url: function() { return '/account'; },
+  url: function() { return '/account' },
+```
 
+```js
   // Both of these two work the same way
   url: function() { return '/books/' + this.id }),
   urlRoot: '/books'
-    });
+})
+```
 
-    var obj = new Model({ url: ... });
+```js
-    var obj = new Model({ urlRoot: ... });
+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)_