Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今、改めてBackboneを評価する

 今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

Kazuki Shibata

May 27, 2015
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

Transcript

  1. Backbone.jsͱ͸ • ܰྔͷMV*ϥΠϒϥϦ • jQuery, underscore.jsʹґଘ • Model, Collection, View,

    Router, HistoryΛఏڙ • require࢖Θͳ͍ͱɺάϩʔόϧԚછ͢Δ • σʔλόΠϯσΟϯά͸खಈͰߦͳ͏
  2. View -> Model var  SomeView  =  Backbone.View.extend({     events:

     {       "click  .button"  :  "changeState"     },     changeState:  function(e){       this.model.set("item",  $(e.target).val());     }   });
  3. Model -> View var  SomeView  =  Backbone.View.extend({     initialize:

     function(){       this.model.on("change",  this.render);     },     render:  function(){       $(this.el).empty().html(         _.template(           $("#template").html(),                     this.model.toJSON()         )       );     }   });
  4. Model -> View (Marionette) var  SomeView  =  Marionette.ItemView.extend({    

    modelEvents:  {       "change":  "render"     }   });
  5. Model -> View (ൺֱ༻Backbone) var  SomeView  =  Backbone.View.extend({    

    initialize:  function(){       this.model.on("change",  this.render);     },     render:  function(){       $(this.el).empty().html(         _.template(           $("#template").html(),                     this.model.toJSON()         )       );     }   });
  6. Model <-> View (Marionette+Stickit) var  SomeView  =  Marionette.ItemView.extend({    

    bindings:  {       "#item":  "item"     },     onRender:  function(){       this.stickit();     }   });
  7. Model <-> View (ൺֱ༻Backbone) var  SomeView  =  Backbone.View.extend({    

    initialize:  function(){       this.model.on("change",  this.render);     },     events:  {       "click  .button"  :  "changeState"     },     changeState:  function(e){       this.model.set("item",  $(e.target).val());     },     render:  function(){       $(this.el).empty().html(         _.template(           $("#template").html(),                     this.model.toJSON()         )       );     }   });
  8. BackboneͱFluxͷؔ܎ • ಛʹ੍໿͸ͳ͍ͨΊɺ
 FluxͷΑ͏ʹσʔλͷྲྀΕΛҰํ޲ʹ͢Δ͜ͱ͸Մೳ • View -> Controller -> Model

    -> View -> … • ViewͰϢʔβʔΠϕϯτΛ͔ͭΈɺ
 ͔ͦ͜ΒApp.vent.trigger(…)ͰControllerʹ఻͑ɺ
 Controller͕֘౰ModelʹมߋΛՃ͑Δ • Marionette͕ఏڙ͍ͯ͠ΔController͸Կͷ໾ׂ΋͍࣋ͬͯͳ͍ͷͰɺ
 ͦΕΛFlux෩ʹҙຯ෇͚ͯ͋͛͠Ε͹͍͚ͦ͏