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(10) event 事件集合 collection

1.集合的用法  集合的事件(add set change reset sort )-- 例子   集合与服务器的交互 ====   集合对象 collection && mode...

underscore学习笔记—集合函数/collections(二)

写在前面: 1.5.2版本,计24个函数 集合函数能在数组、对象和类数组对象,如arguments、NodeList和类似的数据类型上工作,要避免传递一个不固定length属性的对象 list:...

8种json数据查询方式

你有没有对“在复杂的JSON数据结构中查找匹配内容”而烦恼。这里有8种不同的方式可以做到: JsonSQL JsonSQL实现了使用SQL select语句在json数据结构中查询的功能。 例子...

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

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

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

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

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

http://yujianshenbing.iteye.com/blog/1748571 7. Model (数据模型)   Model是Backbone中所有数据模型的基类,用于封装原始数据,...
  • qfgg3
  • qfgg3
  • 2017年01月12日 09:47
  • 396

Backbone入门(Model,Collection)

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

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

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

Backbone入门指南(六):View (视图)

转:http://yujianshenbing.iteye.com/blog/1748830 9. View (视图控制器)   我们在前面的章节中介绍了Model和Collect...
  • pzasdq
  • pzasdq
  • 2017年01月19日 16:45
  • 118

Backbone入门(View,Controller)

2012-02-24 13:461055人阅读评论(3)收藏举报 目录(?)[+] ViewController(新版为Router) View Backbone ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Backbone入门基础 - Model和View事件
举报原因:
原因补充:

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