Пишем веб-приложение на Backbone.js

Views

Backbone.View

new Backbone.View()

el
$el

var v = new Backbone.View();
v.el;
v.$el

Backbone.View.extend({

})

var MovieView = Backbone.View.extend({

})

var MovieView = Backbone.View.extend({
    render: function(){
        this.$el.append( '<button>Click me</button>')
    }
})

var MovieView = Backbone.View.extend({
    render: function(){
        this.$el.append( '<button>Click me</button>')
    }
});

var movieView = new MovieView();
movieView.render();

tagName
className
attributes

var ListItemView = Backbone.View.extend({
    tagName: 'li'
});

$el.appendTo( document.body )

DOM Events

Backbone.View.extend({
    events: {
        "click .close": "remove"
    }
});

jsbin.com/kewezi/watch

Models

Backbone.Model

new Backbone.Model()

var m = new Backbone.Model( {
    title: "Deadpool",
    year: 2016
} );

m.get("title");
m.toJSON(); // to javascript object
m.set({ description: "A former Special Forces..."  })

var Movie = Backbone.Model.extend({
    defaults: {
        title: "",
        year: 0
    }
});

var m = new Movie( {
    title: "Deadpool",
    year: 2016
} );

var Movie = Backbone.Model.extend({
    defaults: {
        title: "",
        year: 0,
        likes: 0
    },
    like: function(){
        this.set({
            likes: this.get('likes') + 1
        });
    }
});

var m = new Movie( {
    title: "Deadpool", year: 2016
} );

m.like();
m.like();
m.get('likes');

View + Model

var m = new Backbone.Model({
    title: "Batman"
});

var v = new Backbone.View({
    model: m
});

v.model.get('title');

var Movie = Backbone.Model.extend();

var MovieView = Backbone.View.extend({
    render: function(){
        this.$el.html('<h1>'+this.model.get('title')+'</h1>');
        return this;
    }
});

var m = new Movie({ title: "Batman" });

var v = new MovieView({ model: m });
v.render().$el.appendTo( document.body );

_.template();

var template = _.template('<h1><%=title%></h1>');

var html = this.template({ title: 'Zootopia' });

// html: <h1>Zootopia</h1>

var Movie = Backbone.Model.extend();

var MovieView = Backbone.View.extend({
    template: _.template('<h1><%=title%></h1>'),
    render: function(){
        var html = this.template( this.model.toJSON() );
        this.$el.html( html );
        return this;
    }
});

var m = new Movie({ title: "Batman" });

var v = new MovieView({ model: m });
v.render().$el.appendTo( document.body );

BackboneEvents

var m = new Backbone.Model();

m.on('change', function(m){
    console.log( m.toJSON() );
})

m.set({ likes: 1 });

var MovieView = Backbone.View.extend({
  initialize: function(){
    this.listenTo( this.model, 'change', this.render);
  }
});

jsbin.com/qurirew/watch

var MovieView = Backbone.View.extend({
  initialize: function(){
    this.listenTo( this.model, 'change:likes', this.updateLikes);
  },
  updateLikes: function(){
    this.$('.likes').text( this.model.get('likes') );
  }
});

BackboneCollection

var coll = new Backbone.Collection([
  { title: "Deadpool" },
  { title: "Batman" }
]);

coll.add({ title: "Captain America"});

var m = coll.findWhere({ title: "Deadpool" });
console.log('FOUND', m.get('title'));
coll.remove( m );

coll.each(function(m){
  console.log( 'EACH', m.get('title') );
});

jsbin.com/yecaka/watch

var Movie = Backbone.Model.extend({});

var Movies = Backbone.Collection.extend({
  model: Movie
});

var movies = new Movies();

movies.each(function(m){
  var v = new MovieView({ model: m });
  v.render().$el.appendTo( document.body );
});

http://jsbin.com/nudemi/watch

BackboneSync

Fake JSON Api:

jsonplaceholder.typicode.com

Fake JSON Api:

mocky.io

Custom headers:

Access-Control-Allow-Origin: *

var Posts = Backbone.Collection.extend({
  url: "http://jsonplaceholder.typicode.com/posts",  
  model: Post
});

var posts = new Posts();

posts.fetch().done(function(){

  posts.each(function(m){
    var v = new PostView({ model: m });
    v.render().$el.appendTo( document.body );
  });

});

http://jsbin.com/nipepo/watch

BackboneRouter

var Router = Backbone.Router.extend({
    routes: {
      "help": "help",
      "post/:id": "post"
    },
    help: function(){     console.log( 'help' );       },
    post: function(id){   console.log( 'post', id );   }
});

$(function(){
  var router = new Router();
  Backbone.history.start();
  // router.navigate('help');
});

jsbin.com/hizodijsbin.com/hizodi/watch