Introduction to Backbone.js
Upcoming SlideShare
Loading in...5
×
 

Introduction to Backbone.js

on

  • 926 views

Basics of the Backbone.js framework.

Basics of the Backbone.js framework.

Statistics

Views

Total Views
926
Views on SlideShare
926
Embed Views
0

Actions

Likes
3
Downloads
39
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Backbone.js Introduction to Backbone.js Presentation Transcript

  • introduction & patterns Backbone.js
  • What is backbone.js A Javascript MVC framework?
  • What is backbone.js Almost.
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • Model var Todo = Backbone.Model.extend({ urlRoot: “/api/todos”, toggle: function() { this.save({done: !this.get("done")}); } }); var todo = new Todo({“id”: “1”}); todo.fetch(); todo.toggle();
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • Collection var Todos = Backbone.Collection.extend({ url: “/api/todos”, model: Todo, }); var todos = new Todos(); todos.fetch(); var todo = todos.get(“1”); todo.toggle();
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • Events var todos = new Todos(); todos.on(“change”, function(eventName, this) { console.log(“Todos changed”); }, todos); todos.fetch();
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • View var TodoView = Backbone.View.extend({ tagName: “li”, events: { “click .toggle”: “toggle”, }, initialize: function() { this.listenTo(this.model, “change”, this.render); }, toggle: function() { this.model.toggle(); } render: function() { this.$el.html(“<p><i class=’toggle’/>” + this.model.get(“name”) + ” </p>”); } });
  • View var TodosView = Backbone.View.extend({ initialize: function() { this.listenTo(this.collection, “change”, this.render); }, render: function() { _.each(this.collection, function(todo) { this.$el.append(new TodoView({model: todo}).render()); }); } }); var todos = new Todos(); var todosView = new TodosView({collection: todos}); todos.fetch();
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • Template // underscore.js ! var TodoView = Backbone.View.extend({ … template: _.template(...); render: function() { this.$el.html(this.template(this.model.attributes)); return this; } });
  • What is backbone.js Collection Model View Router Sync Events S E R V E R B R O W S E R C T R L Template
  • Router var app = Backbone.Router.extend({ routes: { “/todos”: “todos”, // #/todos “/todos/:id”: “todo” // #/todos/1 }, todos: function() { ... }, todo: function(id) { ... } });
  • This is a lot of boilerplate code.
  • Fortunately backbone.js supports inheritance!
  • Backbone patterns.
  • Thank you ● @theorm ● https://github.com/theorm/backbone-recipes