backbone事件绑定上下文this的使用

使用Backbone.js主要就是怎样将Backbone.Model,Backbone.Collection,Backbone.View三者进行组织起来，实现想要的业务逻辑。一个很核心的东西就是将Model跟View进行关联，Collection进行管理。在这个其中参数扮演一个重要的角色。

看一段简单的代码：

<style>

    *{padding:0;margin:0}

</style>

<div id="wrap" class="wrap"></div>

 1 $(function(){

 2     var Model=Backbone.Model.extend({

 3         defaults:{

 4             name:‘AA‘,

 5             age:‘BB‘

 6         }

 7     })

 8

 9     var C=Backbone.Collection.extend({

10         model:Model

11     })

12

13     var c = new C()

14

15     var main = Backbone.View.extend({

16         el:‘div‘,

17         template:_.template($(‘#main‘).html()),

18         events:{

19             ‘click .btn‘:‘add‘,

20             ‘click #testCollection‘:‘submitData‘

21         },

22         initialize:function(){

23             this.render()

24             c.on(‘add‘,this.create,this) //在回调函数里，调用View 上面的函数的时候需要提供上下文，即第三个参数

25         },

26         render:function(){

27             $(‘#wrap‘).html(this.template())

28         },

29         add:function(){

30             var m=new Model()

31             c.add(m);

32         },

33         create:function(obj){ //通过collection的add事件触发

34             this.addItem(obj) //如果事件绑定时没有提供上下文参数会报错

35         },

36         addItem:function(obj){

37             var item = new Item({model:obj});

38             $("#items").append(item.render().el)

39         },

40         submitData:function(){

41             console.log(c.toJSON())

42         }

43     })

44

45     var Item=Backbone.View.extend({

46         tagName:‘li‘,

47         template:_.template($(‘#item‘).html()),

48         render:function(){

49             $(this.el).html(this.template(this.model.toJSON()));

50             return this;

51         }

52     })

53

54     var view = new main()

55 })

<script id="main" type="text/template">

    <div style="width:300px;height:500;border:1px solid #ccc;margin:0 auto" >

        <ul id="items"></ul>

        <div><button class="btn">click btn</button><button id="testCollection">test collection</button></div>

    </div>

</script>

<script id="item" type="text/template">

    <span><%=name%></span>:<span><%=age%></span>

</script>

backbone事件绑定上下文this的使用