Question

所以我尝试使用documentation来学习如何使用骨干事件但是我坚持参加活动部分，当我点击页面类内容时它应该警告＆＃34;页面标签已被点击＆＃34;但它在注释行上引发错误。

<body>
        <div class="page"></div> 
</body>

<script type="text/javascript">
    var View = Backbone.View.extend({
        initialize: function()
        {
            this.render(); 
        },
        render: function()
        {
            this.$el.html('Click me im an element');
        },
        events: function()
        {
                       //Uncaught SyntaxError: Unexpected token : 
            "click .page" : "callme"
        },
        callme: function()
        {
            alert('page tag has been clicked');
        }
    });

    var view = new View({
        el: '.page'
    });
</script>

Answer 1

事件实际上只是一个它不是函数的对象。它可以使用下面的代码。希望有所帮助。

events: {
 "click .page" : "callme"
}

您遇到的另一个错误是您实际上并未使用Backbone视图。

您可以正确创建视图，但据我所知，您并未将其附加到视图中。

你需要做类似的事情。

$('body').html(view.render().el);

这会将您的视图附加到DOM并添加所有事件侦听器。

而不是将el传递给BackboneView，您只需将页面类添加到View中即可。以下示例。

className: page,

Answer 2

您的events属性必须是哈希

events: {
    "click .page" : "callme"
}

或返回哈希的函数

events: function() {
    return {
        "click .page" : "callme"
    };
}

您指的是.page选择器，但这是您的视图元素。使用全局选择器
```
events: {
    "click " : "callme"
}
```
或将el设置为祖先节点，例如
```
var view = new View({
    el: 'body'
});
```

Answer 3

你的代码实际上有两个问题，第一个是你在没有返回对象的情况下使用函数来处理事件哈希（使用函数很好，但你需要返回一个对象，或者直接绑定到事件哈希值）。第二个是您列出了具有页面类的子元素的事件，该页面类不存在。您希望从绑定到事件的位置删除类，只需在视图中的任意位置单击，或者听取现有元素。

例如

   var View = Backbone.View.extend({
        initialize: function()
        {
            this.render(); 
        },
        render: function()
        {
            this.$el.html('Click me im an element');
        },
        events: {
            "click" : "callme"
         },
        callme: function()
        {
            alert('page tag has been clicked');
        }
    });

    var view = new View({
        el: '.page'
    });

http://jsbin.com/temicema/1/

这应该足以使您的代码正常工作，但是可能值得了解骨干事件的工作原理。当您在主干中指定事件绑定到根el并且然后侦听您指定的事件与您指定的选择器匹配时。在引擎盖下，主要使用jQuery's .on来委派事件，因此在您的情况下，主干基本上正在进行this.$el.on('click, '.page', this.callme)。

如何在主干JS视图中使用事件

3 个答案: