首页 > 代码库 > backbone事件绑定上下文this的使用

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

2024-07-05 03:09:53   225人阅读

使用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>

 


联系
我们