backbone.js初使用

中文网地址：​​https://www.backbonejs.com.cn/​​

demo案例：

var song = Backbone.Model.extend();
var SongView = Backbone.Model.extend({
  render:function(){
    this.$el.html(this.model.get("title"))
    return this;
  }
});

var song = new Song({
  title:"Blue in Green"
});
var songView = new SongView({
  el:"#container",
  model:song;
});
songView.render();



===========================================================
var Songs = Backbone.Collection.extend({
  model:song
})
var songs = new Songs({
  new Song({id:'1',title:"Blue in Green"})
  new Song({id:'2',title:"So What"})
  new Song({id:'3',title:"All Blues"})
})
//定义
var SongsView = Backbone.View.extend({
  initalize:function(){
    this.model.on("add",this.onSongAdded,this); //监听到执行了add方法，就调用onSongAdded这个方法；【this.model是Songs  == songs.add(new Song({title:'new Song'}))】
    this.model.on("remove",this.onRemoved,this);
  },
  onSongAdded:function(song){
    console.log('song added!')
    this.$el.append(songView.render.$el);
  },
  onRemoved:function(song){
    this.$el.find("li#"+song.id).remove();
  },
  render:function(){
    this.model.each(function(song){
      var songView = new SongView({model:song})
      this.$el.append(songView.render().$el);
    })
  }
})
//初始化
var SongsView = new SongsView({
  el:"#container",
  model:songs,
});
//调用
songsView.render();

=========================================================================================
<script id="songTemplate" type="text/html">
  <%=title%>  //此处实际上就是个占位符，类似于vue中的{{title}}
  <button>Listen</button>
  <%if (plays > 1000) {%>                       //和jsp语法差不多
    <span class="popular">Popular</span>
  <%}%>
</script>
var Song = Backbone.Model.extend({});
var SongView = Backbone.Model.extend({
  render:function(){
    var template = _.template($("#songTemplate").html());
    var html = template(this.model.toJSON());
    this.$el.html(html);
    return this;
  }
})
var song = new SongView({title:"Blue in Green",plays:10});
var songView = new SongView({
  el:"#container",
  model:song,
});
songView.render();