Your SlideShare is downloading. ×
0
Backbone.js  Simple Tutorial     by @fallroot
Backbone.jsBackbone supplies structure to JavaScript-heavy applications byproviding models with key-value binding and cust...
$ rails new todoapp                                                     Back-end$ cd todoapp$ rm public/index.html$ rails ...
<script type="text/template"></script>         Dependency<script src="jquery.js / zepto.js"></script><script src="undersco...
var Item = Backbone.Model.extend({  urlRoot: /todos                                                                    POS...
var Item = Backbone.Model.extend({  urlRoot: /todos                                                                       ...
var Item = Backbone.Model.extend({  urlRoot: /todos                                                                    DEL...
var Item = Backbone.Model.extend({  urlRoot: /todos                                                                       ...
var Item = Backbone.Model.extend();                                      Collectionvar ItemView = Backbone.View.extend({ t...
var Item = Backbone.Model.extend();    var List = Backbone.Collection.extend({                                            ...
var Router = Backbone.Router.extend({ routes: {                                                                           ...
<script type="text/template" id="item-template"> <p class="done">                                                         ...
<script type="text/template" id="item-template"> <p class="done">   var Item = Backbone.Model.extend({                    ...
All Together
Conclusion•   For JavaScript Heavy Application    •   Single-Page Application•   Skinny Back-end    •   RESTful JSON Inter...
Backbone.js Simple Tutorial
Upcoming SlideShare
Loading in...5
×

Backbone.js Simple Tutorial

9,863

Published on

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

No Downloads
Views
Total Views
9,863
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Backbone.js Simple Tutorial"

    1. 1. Backbone.js Simple Tutorial by @fallroot
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. All Together
    15. 15. Conclusion• For JavaScript Heavy Application • Single-Page Application• Skinny Back-end • RESTful JSON Interface
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×