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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone.js Simple Tutorial

9,784
views

Published on

Published in: Technology

0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,784
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

    ×