Question

我正在使用骨干网构建一个Web应用程序，并且我在我的事件未正确绑定到相应对象的问题中继续运行。

我使用骨干与qunit和sinon结合进行测试。我想抓住连接错误。我对骨干集合的理解是，只要collection.create()被称为骨干，就会通过集合将新模型保存到服务器，因此"request"，"sync"或可能"error"事件应该叫做。所以在我的收藏中我添加了：

var CProduct = Backbone.Collection.extend({

    // Code

    events : {
        'sync' : 'success',
        'error' : 'fail'
    },
    success : function()
    {
        console.log('success');
    },
        fail: function()
    {
        console.log('sync error');
    },

    // More code
});

在我的代码中的某个其他位置，这是通过单击按钮触发的：

createProduct
{
    alert('creating model');
    var title = $('#title').val();
    var description = $('#description').val();
    this.collection.create({'title':title,'description':description});
}

警告是通过点击检查此特定事件是否被触发和集合是CProduct集合。请注意，这是在包含集合的视图中。

我使用sinon伪造服务器调用并使用以下代码补充：

module("Product models",{
    setup: function(){
        server = sinon.fakeServer.create();
    },
    teardown: function(){}
}

asyncTest("someTest", 1 , function(){

    //Some preparation code

    var test = function(eventData) {
         console.log(eventData);
         server.respond();
    };

    server.respondWith("GET", "/api/testmodel/1",[500, 
         { "Content-Type": "application/json"}, JSON.stringify({"FAIL":"ERROR"})]);
     //trying to make it fail
    cproduct.on('request', test);
    new ExpandProductFrom({'collection':cproduct});
}

但在此之后所有事件都没有被触发。因此，在查看了主干api后，我发现.on绑定事件到对象。所以我将events : {}替换为：

initialize : function()
{
    this.on('sync',this.success);
    this.on('error',this.fail);
}

只有在我更正了respondWith函数时才会运行成功函数。

回到我的问题：如何正确使用events:{}或.on功能？

由于

Answer 1

这是对的。开箱即用，如果您在视图中，则需要使用.on，最好是listenTo。

有一些插件可以提供您正在寻找的功能，但它不在核心。

Answer 2

你混淆了两种事件，让我解释一下：

events中的Backbone.View属性用于侦听由DOM元素触发的事件，更准确地说是侦听视图$el
.on方法用于侦听由任何jQuery对象触发的事件（包括Backbone.Collection）
.listenTo方法比jQuery .on更优先，因为它扩展了它并为事件模型添加了更多功能，请查看Documentation

Answer 3

简短的回答是......

事件：{}

此属性用于捕获DOM（模板）中发生的委托事件。
例如，按钮点击事件

on（）/ bind（）

这些方法是捕获骨干内发生的内部事件

例如，集合/模型添加事件

如何以及何时使用.on或事件：{}与骨干

3 个答案: