标签: backbone-events

骨干视图:从父级继承和扩展事件

Backbone的文档说明:

events属性也可以定义为返回事件哈希的函数,以便以编程方式定义事件,并从父视图继承它们.

你如何继承父视图事件并扩展它们?

父视图

var ParentView = Backbone.View.extend({
   events: {
      'click': 'onclick'
   }
});
Run Code Online (Sandbox Code Playgroud)

儿童观

var ChildView = ParentView.extend({
   events: function(){
      ????
   }
});
Run Code Online (Sandbox Code Playgroud)

javascript backbone.js backbone-events

114
推荐指数
5
解决办法
5万
查看次数

Backbone 0.9.9:listenTo和on之间的区别

我试图了解他们在Backbone 0.9.9中所做的新变化.

目前,我有问题理解之间的区别listenToon:

listenTo

var View = Backbone.View.extend({

    tagName: "div",

    intialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.empty();
        this.$el.append('<p>hello world</p>');
    }

});
Run Code Online (Sandbox Code Playgroud)

var View = Backbone.View.extend({

    tagName: "div",

    intialize: function() {
        this.model.on('change', this.render, this);
    },

    render: function() {
        this.$el.empty();
        this.$el.append('<p>hello world</p>');
    }

});
Run Code Online (Sandbox Code Playgroud)

我听说listenTo允许stopListening取消订阅所有事件,例如删除视图以避免内存泄漏.

这是唯一的原因吗?

javascript events backbone.js backbone-events

55
推荐指数
2
解决办法
2万
查看次数

Backbone JS:一个视图可以在其他视图中触发更新吗?

在我的简单项目中,我有2个视图 - 订单项视图(品牌)和应用.我有附加功能,允许选择多个项目:

var BrandView = Backbone.View.extend({
...some code...
    toggle_select: function() {
        this.model.selected = !this.model.selected;
        if(this.model.selected) $(this.el).addClass('selected');
        else $(this.el).removeClass('selected');
        return this;
    }
});

var AppView = Backbone.View.extend({
...some code...
    delete_selected: function() {
        _.each(Brands.selected(), function(model){ 
            model.delete_selected();
        });
        return false;
    },
});

事实是,我想知道选择了多少项.在此设置中,选择不会影响模型,因此不会触发任何事件.从MVC概念来看,我理解视图不应该与其他视图直接对话.那么AppView如何知道BrandViews中正在选择某些内容?

更具体地说,我AppView知道选择了多少项,所以如果选择了多于1个,我会显示一个菜单供多个选择.

javascript backbone.js backbone-events backbone-views

45
推荐指数
2
解决办法
3万
查看次数

Backbone:重新渲染时丢失了事件

我有超级视图谁负责渲染子视图.当我重新渲染超视图中的所有事件的子视图都将丢失.

这是一个例子:

var SubView = Backbone.View.extend({
    events: {
        "click": "click"
    },

    click: function(){
        console.log( "click!" );
    },

    render: function(){
        this.$el.html( "click me" );
        return this;
    }
});

var Composer = Backbone.View.extend({
    initialize: function(){
        this.subView = new SubView();
    },

    render: function(){
        this.$el.html( this.subView.render().el );             
    }
});


var composer = new Composer({el: $('#composer')});
composer.render();
Run Code Online (Sandbox Code Playgroud)

当我点击click me div时,会触发事件.如果我composer.render()再次执行,所有内容看起来都很相似,但不会再触发click事件.

检查工作jsFiddle.

javascript-events backbone.js backbone-events

37
推荐指数
2
解决办法
1万
查看次数

backbone.js中的delegateEvents

任何人都可以解释一下backbone.js中的delegateEvents是什么吗?文档没有帮助我理解.

我确切的用例是:

我有一个带有内部视图Y的主视图X.它们工作得很好,但如果我转到主视图Z然后返回到X(重用,而不是重新创建),那么附加到Y子元素的事件就会丢失.delegateEvents解决了这个问题,但我想了解原因.

backbone.js backbone-events

28
推荐指数
2
解决办法
2万
查看次数

在骨干视图中绑定多个事件类型

我想知道是否有可能在一条线路内绑定主干中的多个事件类型.

考虑以下:

var MyView = Backbone.View.extend({
    id: 'foo',
    events: {
        'click .bar': 'doSomething',
        'touchstart .bar': 'doSomething'
    },
    doSomething: function(e) {
        console.log(e.type);
    }
});
Run Code Online (Sandbox Code Playgroud)

基本上我想知道的是,是否可以将'click'和'touchstart'的事件绑定组合成一行 - 沿着以下行:

events: { 'click,touchstart .bar': 'doSomething' }
Run Code Online (Sandbox Code Playgroud)

任何建议,将不胜感激.

javascript backbone.js backbone-events backbone-views

27
推荐指数
2
解决办法
2万
查看次数

在Backbone.js中,为什么静默更改最终会触发更改事件?

当我{"silent":true}在Backbone模型中设置属性时通过时,为什么不仅仅抑制change:attribute事件?下次更改属性时触发该事件的优点是什么?

更新

Backbone 0.9.10改变了传递的行为{ "silent": true }.来自更改日志:

传递{silent:true}变化将不再拖延个人"变化:attr"事件,而是完全沉默.

此处浏览更改日志

backbone.js backbone-events backbone-model

26
推荐指数
1
解决办法
2万
查看次数

如何将2个处理程序附加到同一事件?

我可以将处理程序附加到Backbone Views,如:

var TodoView = Backbone.View.extend({
    events: {
        "xxx": "eventHandler1"
        "yyy": "eventHandler2"
    }
});
Run Code Online (Sandbox Code Playgroud)

但是如果我想在同一个事件中附加多个处理程序呢?

var TodoView = Backbone.View.extend({
    events: {
        "xxx": "eventHandler1"
        "yyy": "eventHandler2"
        "xxx": "eventHandler3" // this isn't valid ... at least in CoffeeScript
    }
});
Run Code Online (Sandbox Code Playgroud)

我可以创建一个自定义处理程序

function compositeXXX() { eventHandler1(); eventHandler2 }
Run Code Online (Sandbox Code Playgroud)

但这似乎并不理想......

javascript backbone.js backbone-events backbone-views

25
推荐指数
2
解决办法
4679
查看次数

将多个属性更改绑定到Backbone.js模型的正确方法

我有以下代码,我将更改绑定到单个属性"attribute_1".

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1", function() {
      console.log('changed!');
    });
  }
});
Run Code Online (Sandbox Code Playgroud)

如何绑定两个属性?这不起作用:

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1, change:attribute_2", function() {
      console.log('changed!');
    });
  }
});
Run Code Online (Sandbox Code Playgroud)

这也不是:

var Mine = Backbone.Model.extend({
  initialize: function() {
    this.bind("change:attribute_1 change:attribute_2", function() {
      console.log('changed!');
    });
  }
});
Run Code Online (Sandbox Code Playgroud)

javascript backbone.js backbone-events backbone-model

23
推荐指数
2
解决办法
2万
查看次数

Backbone model.destroy():是否需要从集合中明确删除?

我有一个简单的问题.我正在寻找一个包含2行代码的函数:

deleteTask: function() {
    this.parent.collection.remove(this.model);
    this.model.destroy();
}
Run Code Online (Sandbox Code Playgroud)

如果我注释掉第一行,它应该从其集合中删除模型,那么事情似乎按预期工作(如同,模型被自动删除).从Backbone的网站上,这是模型"破坏"功能的相关描述:

触发模型上的"销毁"事件,该事件将通过包含它的任何集合冒泡.

我可以安全地假设删除this.parent.collection.remove(this.model);不会以任何方式影响代码的功能吗?这是我的想法,但我想确保它.

谢谢!

backbone.js backbone-events

23
推荐指数
1
解决办法
3万
查看次数