Your SlideShare is downloading. ×
0
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
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,820

Published on

Published in: Technology
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

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

    ×