SlideShare a Scribd company logo

Backbone.js Simple Tutorial

•Download as KEY, PDF•
•
추근 문
추근 문

Backbone.js provides structure to JavaScript applications by supplying models, collections, views and connecting them via a RESTful JSON interface. It offers models with key-value binding and events, collections with enumerable functions, and views with declarative event handling. Templates can be used to render views by passing a model's JSON representation. Routers help manage navigation and application state.

Related slideshows

Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
 
Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)
 
1 of 16
Backbone.js Simple Tutorial by @fallroot
Backbone.js Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
$ rails new todoapp Back-end $ cd todoapp $ rm public/index.html $ rails g scaffold todo title:string done:boolean • Ruby on Rails $ rake db:migrate • 3.1.0 RC5 $ rails s
<script type="text/template"></script> Dependency <script src="jquery.js / zepto.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my-scripts.js"></script>
var Item = Backbone.Model.extend({ urlRoot: '/todos' POST }); var item = new Item({ title: 'Create new todo' }); • Backbone.Model.extend(properties, item.save(); [classProperties]) • model.save([attributes], [options]) • model.url() • model.urlRoot • /urlRoot/id
var Item = Backbone.Model.extend({ urlRoot: '/todos' PUT }); var item = new Item({ title: 'Create another todo' }); • _.bind(function, object, [*arguments]) item.save(); • _.delay(function, wait, [*arguments]) var save = _.bind(item.save, item); _.delay(save, 5000, {title: 'Title updated'});
var Item = Backbone.Model.extend({ urlRoot: '/todos' DELETE }); var item = new Item({ title: 'This will be deleted' }); • model.destroy([options]) item.save(); _.delay(_.bind(item.destroy, item), 5000);
var Item = Backbone.Model.extend({ urlRoot: '/todos' GET }); var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { • Backbone.View.extend(properties, this.model.bind('change', this.render, this); [classProperties]) }, • model.fetch([options]) render: function() { this.el.innerHTML = this.model.get('title'); • model.get(attribute) return this; • object.bind(event, callback, [context]) } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
var Item = Backbone.Model.extend(); Collection var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { this.model.bind('change', this.render, this); }, • Backbone.Collection.extend(properties, render: function() { [classProperties]) this.el.innerHTML = this.model.get('title'); return this; • collection.fetch([options]) } • collection.model }); • collection.url or collection.url()
var Item = Backbone.Model.extend(); var List = Backbone.Collection.extend({ Collection var ItemView = Backbone.View.extend({ model: Item, tagName: 'li', url : '/todos' }); initialize: function() { var ListView = Backbone.View.extend({ this.model.bind('change', this.render, this); }, el: $('#todos'), • Backbone.Collection.extend(properties, initialize: function() { render: function() { this.collection.bind('reset', this.render, this); [classProperties]) this.el.innerHTML = this.model.get('title'); this.collection.fetch(); • collection.fetch([options]) return this; }, } • collection.model }); render: function() { var el = this.el; • collection.url or collection.url() this.collection.each(function(item) { var itemView = new ItemView({model: item}); el.append(itemView.render().el); }); return this; } }); new ListView({collection: new List});
var Router = Backbone.Router.extend({ routes: { Router '*action': 'actionCallback' }, actionCallback: function(action) { document.body.innerHTML = action; } • Backbone.Router.extend(properties, }); [classProperties]) var router = new Router(); • router.navigate(fragment, [triggerRoute]) Backbone.history.start(); • Backbone.history.start([options]) router.navigate('started', true); • URL Fragment var navigate = _.bind(router.navigate, router); _.delay(navigate, 3000, 'moved', true); • history.pushState / popState • window.onhashchange • IE8 • polling if not supported
<script type="text/template" id="item-template"> <p class="done"> Template <input type="checkbox" <% if (done) { %>checked<% } %>> </p> <p class="title"><%= title %></p> <p class="commands"> <button class="edit">Edit</button> <button class="remove">Remove</button> </p> • _.template(templateString, [context]) </script> • model.toJSON()
<script type="text/template" id="item-template"> <p class="done"> var Item = Backbone.Model.extend({ Template <input type="checkbox" <% if (done) { %>checked<% } %>> urlRoot: '/todos' </p> }); <p class="title"><%= title %></p> <p class="commands"> var ItemView = Backbone.View.extend({ <button class="edit">Edit</button> tagName: 'li', <button class="remove">Remove</button> </p> template: _.template($('#item-template').html()), • _.template(templateString, [context]) </script> initialize: function() { • model.toJSON() this.model.bind('change', this.render, this); }, render: function() { this.el.innerHTML = this.template(this.model.toJSON()); return this; } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
All Together
Conclusion • For JavaScript Heavy Application • Single-Page Application • Skinny Back-end • RESTful JSON Interface
Backbone.js Simple Tutorial

More Related Content

Backbone.js Simple Tutorial

  • 1. Backbone.js Simple Tutorial by @fallroot
  • 2. Backbone.js Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
  • 3. $ rails new todoapp Back-end $ cd todoapp $ rm public/index.html $ rails g scaffold todo title:string done:boolean • Ruby on Rails $ rake db:migrate • 3.1.0 RC5 $ rails s
  • 4. <script type="text/template"></script> Dependency <script src="jquery.js / zepto.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my-scripts.js"></script>
  • 5. var Item = Backbone.Model.extend({ urlRoot: '/todos' POST }); var item = new Item({ title: 'Create new todo' }); • Backbone.Model.extend(properties, item.save(); [classProperties]) • model.save([attributes], [options]) • model.url() • model.urlRoot • /urlRoot/id
  • 6. var Item = Backbone.Model.extend({ urlRoot: '/todos' PUT }); var item = new Item({ title: 'Create another todo' }); • _.bind(function, object, [*arguments]) item.save(); • _.delay(function, wait, [*arguments]) var save = _.bind(item.save, item); _.delay(save, 5000, {title: 'Title updated'});
  • 7. var Item = Backbone.Model.extend({ urlRoot: '/todos' DELETE }); var item = new Item({ title: 'This will be deleted' }); • model.destroy([options]) item.save(); _.delay(_.bind(item.destroy, item), 5000);
  • 8. var Item = Backbone.Model.extend({ urlRoot: '/todos' GET }); var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { • Backbone.View.extend(properties, this.model.bind('change', this.render, this); [classProperties]) }, • model.fetch([options]) render: function() { this.el.innerHTML = this.model.get('title'); • model.get(attribute) return this; • object.bind(event, callback, [context]) } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
  • 9. var Item = Backbone.Model.extend(); Collection var ItemView = Backbone.View.extend({ tagName: 'li', initialize: function() { this.model.bind('change', this.render, this); }, • Backbone.Collection.extend(properties, render: function() { [classProperties]) this.el.innerHTML = this.model.get('title'); return this; • collection.fetch([options]) } • collection.model }); • collection.url or collection.url()
  • 10. var Item = Backbone.Model.extend(); var List = Backbone.Collection.extend({ Collection var ItemView = Backbone.View.extend({ model: Item, tagName: 'li', url : '/todos' }); initialize: function() { var ListView = Backbone.View.extend({ this.model.bind('change', this.render, this); }, el: $('#todos'), • Backbone.Collection.extend(properties, initialize: function() { render: function() { this.collection.bind('reset', this.render, this); [classProperties]) this.el.innerHTML = this.model.get('title'); this.collection.fetch(); • collection.fetch([options]) return this; }, } • collection.model }); render: function() { var el = this.el; • collection.url or collection.url() this.collection.each(function(item) { var itemView = new ItemView({model: item}); el.append(itemView.render().el); }); return this; } }); new ListView({collection: new List});
  • 11. var Router = Backbone.Router.extend({ routes: { Router '*action': 'actionCallback' }, actionCallback: function(action) { document.body.innerHTML = action; } • Backbone.Router.extend(properties, }); [classProperties]) var router = new Router(); • router.navigate(fragment, [triggerRoute]) Backbone.history.start(); • Backbone.history.start([options]) router.navigate('started', true); • URL Fragment var navigate = _.bind(router.navigate, router); _.delay(navigate, 3000, 'moved', true); • history.pushState / popState • window.onhashchange • IE8 • polling if not supported
  • 12. <script type="text/template" id="item-template"> <p class="done"> Template <input type="checkbox" <% if (done) { %>checked<% } %>> </p> <p class="title"><%= title %></p> <p class="commands"> <button class="edit">Edit</button> <button class="remove">Remove</button> </p> • _.template(templateString, [context]) </script> • model.toJSON()
  • 13. <script type="text/template" id="item-template"> <p class="done"> var Item = Backbone.Model.extend({ Template <input type="checkbox" <% if (done) { %>checked<% } %>> urlRoot: '/todos' </p> }); <p class="title"><%= title %></p> <p class="commands"> var ItemView = Backbone.View.extend({ <button class="edit">Edit</button> tagName: 'li', <button class="remove">Remove</button> </p> template: _.template($('#item-template').html()), • _.template(templateString, [context]) </script> initialize: function() { • model.toJSON() this.model.bind('change', this.render, this); }, render: function() { this.el.innerHTML = this.template(this.model.toJSON()); return this; } }); var item = new Item({id: 1}); item.fetch(); var itemView = new ItemView({model: item}); $('#todos').append(itemView.el);
  • 15. Conclusion • For JavaScript Heavy Application • Single-Page Application • Skinny Back-end • RESTful JSON Interface

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n