Backbone.js Simple Tutorial

  • 9,609 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,609
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
27

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Backbone.js Simple Tutorial by @fallroot
  • 2. Backbone.jsBackbone supplies structure to JavaScript-heavy applications byproviding models with key-value binding and custom events, collectionswith a rich API of enumerable functions, views with declarative eventhandling, and connects it all to your existing application over a RESTfulJSON 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(); Collectionvar 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({ Collectionvar 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 Fragmentvar 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);
  • 14. All Together
  • 15. Conclusion• For JavaScript Heavy Application • Single-Page Application• Skinny Back-end • RESTful JSON Interface