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实现级联选择框

我最近有机会参与了一个有一定规模的Backbone.js应用程序的开发。在这篇文章中,我会演示一个比单一模型和视图大一点的例子。此外,我会用迭代的方式来演示,而不是一下子把所有的都展示给你。你将会看到...

Backbone入门基础 - Model和View基本用法

简单介绍Backbone的Model和View的基本用法以及两者间的关系,并提供用法实例

BackboneJs入门学习[02]---Model初探

BackboneJs入门学习之模块—Model首先,在学习Model模块之前,我们先了解一下BackboneJs提供的几大模块。具体的文档可以参看 http://www.css88.com/doc/...

6、backbone中的view实例

Backbone的view是用来显示你的model中的数据到页面的,同时它也可用来监听DOM上的事件然后做出响应。 先要给出一个页面的大体代码,下面的所有试验代码都要放到这里面: ...

backbone通过controller托管view和model之间通信--demo1

想了想,学习backbone一段日子,总觉得会了,一上手一堆的不运行,调了半天,继续返回看api和相关网上资料,发现文章还是原来那些于是安心做了几个关于view和model的测试后发现backbone...

Backbone入门(Model,Collection)

目录(?)[+] Model(模型)Collection(集合) Backbone 是一个前端 JS 代码 MVC 框架,被著名的 37signals 用来构建他们的移动客户端。它不可...

Backbone入门指南(四):Model(数据模型)

7. Model (数据模型)   Model是Backbone中所有数据模型的基类,用于封装原始数据,并提供对数据进行操作的方法,我们一般通过继承的方式来扩展和使用它。   如果你做过数据库开发...

Backbone入门(Model,Collection)

Backbone 是一个前端 JS 代码 MVC 框架,被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery,不可取代现有的 template 库。而是和这些结合起来构建复...

简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.

深刻理解coffeescript的继承过程中,constructor,super的误用导致Backbone.View的events未正常注册而事件无效。

Backbone入门(View,Controller)

2012-02-24 13:461055人阅读评论(3)收藏举报 目录(?)[+] ViewController(新版为Router) View Backbone ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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