Your SlideShare is downloading. ×
  • Like
  • Save
Backbone.js Simple Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Backbone.js Simple Tutorial

  • 9,668 views
Published

 

Published 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,668
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