Backbone之view事件

---

---

<script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });
       var ToDoItemView=Backbone.View.extend({

       })
       var toDoItemView=new ToDoItemView();
       toDoItemView.listenTo(toDoItem,'change',function(){
           console.log('toDoItemView receive change.');
       });
    </script>

---

---

---

---

<script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });

        var ToDoItemView = Backbone.View.extend({
            initialize: function () {
                this.listenTo(this.model,'change',this.render)
            },
            render:function(){
                console.log('model is changed.');
            }
        })
        var toDoItemView = new ToDoItemView({
            model:toDoItem
        });
        
    </script>

---

---

---

---

---

    <p id="p1">dym</p>
    <p id="p2">dym</p>
    
    <script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });

        var ToDoItemView = Backbone.View.extend({
            events:{
                'click':'handleElClick',
                'dblclick':'handleElDblClick'
            },
            initialize: function () {
                this.listenTo(this.model,'change',this.render)
            },
            render:function(){
                console.log('model is changed.');
            },
            handleElClick:function(){
                console.log('click');
            },
            handleElDblClick:function(){
                console.log('handleElDblClick');
            }
        })
        var toDoItemView = new ToDoItemView({
            model:toDoItem,
            el:'#p1'
        });

        var toDoItemView2 = new ToDoItemView({
            model:toDoItem,
            el:'#p2'
        });
    </script>

---

---

 <p id="p1"><span>p1</span><a href="##">p1a</a></p>
    <p id="p2">dym</p>

    <script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });

        var ToDoItemView = Backbone.View.extend({
            events:{
                'click span':'handleSpanElClick',  // 'click span' 当前对象的el中的span              
            },
            initialize: function () {
                this.listenTo(this.model,'change',this.render)
            },
            render:function(){
                console.log('model is changed.');
            },
            handleSpanElClick:function(){
                console.log('Span Click');
            }
        })
        var toDoItemView = new ToDoItemView({
            model:toDoItem,
            el:'#p1'
        });

        var toDoItemView2 = new ToDoItemView({
            model:toDoItem,
            el:'#p2'
        });
    </script>

---

---

<script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem1 = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });
        var toDoItem2 = new ToDoItem({
            'title': 'task2',
            'description': 'description2'
        });

        var ToDoItemView = Backbone.View.extend({
            tagname:'div',
            className:'todo-item',
            events:{
                'click span':'handleSpanElClick',  // 'click span' 当前对象的el中的span              
            },
            initialize: function () {
                this.listenTo(this.model,'change',this.render)
            },
            render:function(){
                var json=this.model.toJSON();
                this.$el.html('<h3>'+json.title+'</h3><p>'+json.description+'</p>');
                return this;
            },
            handleSpanElClick:function(){
                console.log('Span Click');
            }
        })
        var toDoItemView1 = new ToDoItemView({
            model:toDoItem1,   
        });

        var toDoItemView2 = new ToDoItemView({
            model:toDoItem2,       
        });
        toDoItemView1.render().$el.appendTo($('body'));
        toDoItemView2.render().$el.appendTo($('body'));
    </script>

---

---

<script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem1 = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });
        var toDoItem2 = new ToDoItem({
            'title': 'task2',
            'description': 'description2'
        });

        var ToDoItemView = Backbone.View.extend({
            tagname:'div',
            className:'todo-item',
            events:{
                'click button':'handleButtonElClick',  // 'click button ' 当前对象的el中的button              
            },
            initialize: function () {
                this.listenTo(this.model,'change',this.render)
            },
            render:function(){
                var json=this.model.toJSON();
                this.$el.html('<h3>'+json.title+'</h3><p>'+json.description+'</p><button>delete</button>');
                return this;
            },
            handleButtonElClick:function(){
               this.remove();
            }
        })
        var toDoItemView1 = new ToDoItemView({
            model:toDoItem1,   
        });

        var toDoItemView2 = new ToDoItemView({
            model:toDoItem2,       
        });
        toDoItemView1.render().$el.appendTo($('body'));
        toDoItemView2.render().$el.appendTo($('body'));
    </script>
    

---

---

采用这种方式去删除，是比较好的一种。不建议采用上面的那一种

 <script>
        var ToDoItem = Backbone.Model.extend({

        })
        var toDoItem1 = new ToDoItem({
            'title': 'task1',
            'description': 'description1'
        });
        var toDoItem2 = new ToDoItem({
            'title': 'task2',
            'description': 'description2'
        });

        var ToDoItemView = Backbone.View.extend({
            tagname:'div',
            className:'todo-item',
            events:{
                'click button':'handleButtonElClick',  // 'click button ' 当前对象的el中的button              
            },
            initialize: function () {
                this.listenTo(this.model,'change',this.render);
                this.listenTo(this.model,'destroy',this.remove);
            },
            render:function(){
                var json=this.model.toJSON();
                this.$el.html('<h3>'+json.title+'</h3><p>'+json.description+'</p><button>delete</button>');
                return this;
            },
            handleButtonElClick:function(){
               this.model.destroy();
            }
        })
        var toDoItemView1 = new ToDoItemView({
            model:toDoItem1,   
        });

        var toDoItemView2 = new ToDoItemView({
            model:toDoItem2,       
        });
        toDoItemView1.render().$el.appendTo($('body'));
        toDoItemView2.render().$el.appendTo($('body'));
    </script>