【第22期】观点:IT 行业加班,到底有没有价值?

Backbone入门基础 - Model和View事件

原创 2016年08月29日 14:54:41

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.
  • 对象关系图
    Model与View的关系

用户交互事件

[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,此写法更优。
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Backbone.js中events中事件不生效

使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...})。幸运的是 Backbone 让我们在 V...

Backbonejs教程第二版目录

把backbonejs版本更新到1.1.0,并对部分内容进行了扩展,添加了新的实战

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

如何高效利用GitHub

正是Github,让社会化编程成为现实。本文尝试谈谈GitHub的文化、技巧与影响。 Q1:GitHub是什么Q2:GitHub风格Q3: 在GitHub,如何跟牛人学习Q4: 享受纯粹的写作与...

Bootloader学习分析

某款2440(b2440)开发板的BootLoader分析 1、包含文件:  GET option.inc  GET memcfg.inc  GET 2440addr.inc option....

最全的前端资源教程

https://github.com/AutumnsWind/Front-end-tutorial 部分内容是出自: https://github.com/jsfront/src/blob/mast...

如何高效利用GitHub

写的那是相当的好,拜读。转载自:http://www.yangzhiping.com/tech/ 正是Github,让社会化编程成为现实。本文尝试谈谈GitHub的文化、技巧与影...

创建SpringMVC项目

1. SpringMVC注解说明 在SpringMVC,数据模型是一张简单的地图,它封装Model或者ModelAndView的类中。它可以从数据库、文件或服务器等上获取。它让你明确如何获取数据和把...

最全前端资源汇集

综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 ht...

React 入门实例教程

http://www.ruanyifeng.com/blog/2015/03/react.html 阮一峰的网络日志 » 首页 » 档案 ...

前端知识大全

综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 ht...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)