Backbone.Model

A refresher, and hence a beginner course

Transcript

1. Backbone.Model A refresher, and hence a beginner course
2. Talk Plan 1. Backbone.Model, in general. 2. [Demo] Patterns of Backbone. 3. [Demo] Limitations of Model & Collection. < 15 min < 15 min
3. Background • Backbone is one of the many JavaScript libraries we are using. • Introduced by the US team and has survived > 4 years in our company. • We don’t always get to maintain what we want. • Backbone.Model is one of the main modules in Backbone MVP stack.
4. Purpose • We need to tame Backbone, understand its deficiencies and strengths. • Don’t work against it, i.e. don’t overwrite their functions. • Learn to leverage on best Backbone patterns.
5. Magic-o-meter Backbone POJO Ember Angular React.js
6. Characteristics of a model 1. Extensible using extend() 2. Mutable using get() and set() 3. Observable using V.listenTo() 4. Non-nested 5. Non-composite ID attribute 6. Free HTTP mapping
7. 1. Extensible var  Customer  =  Backbone.Model.extend({
      defaults:  {
            noOfCats:  0
      }
 });   var  larry  =  new  Customer({
      name:  'Larry'
 });   How many cats does Larry have?
9. 1. Extensible var  Customer  =  Backbone.Model.extend({
      defaults:  {
            noOfCats:  0
      }
 });   var  larry  =  new  Customer({
      name:  'Larry',
      noOfCats:  4
 });   How many cats does Larry have?
11. 2. Mutability var  larry  =  new  Customer({
      name:  'Larry',
      noOfCats:  4
 });   larry.set('noOfCats',  2);   larry.get(‘noOfCats');   How many cats does Larry now have?
13. 3. Observable var  larry  =  new  Customer({
      name:  'Larry',
      noOfCats:  4
 });   larry.on('change:noOfCats',  function()  {
      //  Something  happens
      //  Mice  gets  nervous?
 });   Highly recommended to use .listenTo() from the View instead.
14. 4. Non-nested var  larry  =  new  Customer({
      name:  {
            firstName:  'Larry',
            lastName:  'King'
      },
      noOfCats:  4
 });   Object within object is not supported. You cannot observe the change of name.firstName. You can only observe the change of name.
15. 5. Non-composite ID • By default the idAttribute is ‘id’. (Can overwrite.) • id should correspond with ID in the backend • This is not possible: var  larry  =  new  Customer({
      id:  {
            network:  1,
            user_id:  1802
      },
      name:  'Larry'
 }); God kills a kitten once you attempt this.
16. 6. HTTP mapping CRUD action model.isNew() model.<fn> HTTP Retrieving FALSE .fetch() GET Creating TRUE .save() POST Updating FALSE .save() PUT Deleting FALSE .destroy() DELETE
17. Demo With the information you learnt, let’s try it out! git clone https://github.com/kahwee/backbone-model-demo.git
18. Links • Annotated source code
 http://backbonejs.org/docs/backbone.html • Issues and direction
 https://github.com/jashkenas/backbone • Videos and conference
 http://backboneconf.com/