Backbone入门基础 - Model和View事件

Model的事件

[1] on监听change事件

var TodoItem=Backbone.Model.extend({
});
var todoItem= new TodoItem({
    title:"task 1",
    description: 'description 1'
});
todoItem.on('change',function(){
    console.log("change trigger");
});

[2] set自动触发change

todoItem.set('title','change title’);

[3] 回调的this, 和this.changed属性, hasChanged

todoItem.on('change',function(){
    console.log(this.changed);
});
todoItem.set('title','change title’);

//run result
Object {title: "change title”}

---

todoItem.on('change',function(){
    if(this.hasChanged('title')){
        console.log(‘title changed');
    }else{
        console.log(‘title not changed');
    }
});

[4] 内置属性比较

• set title的值和原来的值一样，由于设置了description而触发了change事件，但不会判定title值发生改变。
• 使用set方法，但实际值没有发生改变，不触发change事件。

todoItem.set('title','change title');
//title changed

todoItem.set('title','change title','description':'change des');
//title not changed

todoItem.set('title','change title');
//无结果

[5] set的silent模式

• set 有个slient的参数，设置为true后不触发事件

todoItem.set('title','change title silent',{silent: true});
//无结果

todoItem.set('title','change title1');
//title changed

[6] trigger手动触发事件

• trigger会触发事件，可以猜想set方法做了判等后，最终使用strigger触发change事件

todoItem.trigger('change');
//title not changed

[7] 自定义事件

• 可自定义事件，通过trigger触发

todoItem.on('abc',function(){
    console.log('abc trigger');
});
//--result--
todoItem.trigger('abc’);

[8] change[:property]事件类型

• 指定监听某个属性的变化

todoItem.on('change:title',function(){
    console.log('title changed');
});

todoItem.set('title','change title1')
//title changed

todoItem.set('description','change des')
//无结果

[9] 内置事件：destroy, sync, invalid

• 除了change事件，backbone还有内置事件destroy, sync, invalid

[10] once

• 事件执行一次立刻被销毁

todoItem.once('change:title',function(){
console.log('title changed');
});

todoItem.set('title','change title1')
//title changed

todoItem.set('title','change title1')
//无结果

[11] off取消事件

• off方法注销事件

todoItem.on('change:title',function(){
    console.log('title changed');
});
todoItem.on('change:description',function(){
    console.log('description changed');
});

todoItem.set('title','change title2')
//title changed

todoItem.set('description','change des2')
//description changed

todoItem.off('change:title')

todoItem.set('title','change title3')
//无结果

todoItem.set('description','change des3')
//description changed

[12] listenTo

• 对象与对象之间实现监听使用listenTo方法，同时存在listenToOnce方法与once类似

var todoItem2 = new TodoItem();
todoItem2.listenTo(todoItem,'change:title',function(){
    //this 指代 todoItem2
});

todoItem2.listenToOnce(todoItem,'change:title',function(){
});

View 的事件

Backbone对象事件

• 注意：例中省略了Model的构造，默认todoItem已存在

[1] on\tigger\off\once

• 与Model的事件类似，仅举此例。

var TodoItemView = Backbone.View.extend({
});

var todoItemView = new TodoItemView();
todoItemView.listenTo(todoItem,'change',function(){
    console.log('todoItemView receive change.');
});

todoItem.set('title','change title')
//todoItemView receive change.

[2] View和Model事件关联

• initialize(构造函数)增加自定义初始化，View监听Model，使用listenTo

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
});

todoItem.set('title','change title')
//model is changed.

• 对象关系图
  

用户交互事件

[1] 关联点击事件

<p id="p1">p1</p>
<p id="p2">p2</p>

var TodoItemView = Backbone.View.extend({
    events:{
        'click': 'handleElClick'
    },
    handleElClick:function(){
        console.log('click');
    }
});
var todoItemView = new TodoItemView({
    model: todoItem,
    el:'#p1'
});
var todoItemView2 = new TodoItemView({
    model: todoItem,
    el:'#p2'
});

[2] jQuery选择器进行过滤

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

var TodoItemView = Backbone.View.extend({
    events:{
        'click span': 'handleSpanClick'
    },
    handleSpanClick:function(){
        console.log('span click');
    }
});

[3] 实例

//--构建Model--
var TodoItem=Backbone.Model.extend({
});
var todoItem= new TodoItem({
    title:"task 1",
    description: 'description 1'
});

var todoItem2= new TodoItem({
    title:"task 2",
    description: 'description 2'
});
//--构建View--
var TodoItemView = Backbone.View.extend({
    //内存中写入div标签
    tagName: 'div',
    //构造函数
    initialize: function(){
        //监听Model的destroy
        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;
    },
    //事件注册
    events:{
        'click button': 'handleButtonClick'
    },
    handleButtonClick: function(){
        this.model.destroy();
    }
});
var todoItemView = new TodoItemView({
    model: todoItem
});
var todoItemView2 = new TodoItemView({
    model: todoItem2
});
//--渲染View--
todoItemView.render().$el.appendTo($('body'));
todoItemView2.render().$el.appendTo($('body'));

• 注意：handleButtonClick方法中直接写this.remove()结果是一样的。但是，采用destroy Model，之后在remove更符合逻辑。另，除了点击事件，也可能存在其他方式去销毁Model，此写法更优。