Backbone.js 如何在backboneJS视图上使用事件_Backbone.js_Backbone Views_Backbone Events

Backbone.js 如何在backboneJS视图上使用事件

backbone.js

Backbone.js 如何在backboneJS视图上使用事件,backbone.js,backbone-views,backbone-events,Backbone.js,Backbone Views,Backbone Events,所以我试图学习如何使用但是我被困在事件部分，当我点击页面类内容时，它应该会提醒“页面标记已被点击”，但它会在注释行上抛出一个错误 <body> <div class="page"></div> </body> <script type="text/javascript"> var View = Backbone.View.extend({ initialize: function()

所以我试图学习如何使用但是我被困在事件部分，当我点击页面类内容时，它应该会提醒“页面标记已被点击”，但它会在注释行上抛出一个错误

<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>


var View=Backbone.View.extend({
初始化：函数（）
{
这个。render（）；
},
render:function（）
{
这个.$el.html（'Click me im a element'）；
},
事件：函数（）
{
//未捕获的语法错误：意外标记：
“单击。页面”：“呼叫我”
},
callme:function（）
{
警报（“已单击页面标记”）；
}
});
变量视图=新视图({
el:“.page”
});

事件实际上只是一个对象，而不是一个函数。它将与下面的代码一起工作。希望有帮助

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

另一个错误是您没有实际使用主干视图

您正确地创建了视图，但据我所知，您没有将其附加到视图中

你需要像这样做

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

这将把视图附加到DOM并添加所有事件侦听器

另外，您可以将页面类添加到视图中，而不是将el传递到BackboneView。下面的例子

className: page,

events

属性必须是哈希或

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

或返回散列的函数

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

您指定了一个

.page

选择器，但这是您的视图元素。或者使用全局选择器

events: {
    "click " : "callme"
}

或者将el设置为祖先节点，例如

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

   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'
    });

实际上，您的代码有两个问题，第一个问题是您在使用函数进行事件哈希时没有返回对象（使用函数很好，但是您需要返回对象，或者直接绑定到事件哈希）。第二个问题是，您正在使用page类列出子元素的事件，而page类不存在。您希望从绑定到事件的位置删除类，只需在视图中的任意位置单击，或者侦听现有元素

比如说

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

   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'
    });

这应该足以让您的代码正常工作，但是了解主干事件的工作原理可能是值得的。在主干中指定事件时，该事件绑定到根

el

，然后侦听与指定的选择器匹配的指定事件。在引擎盖下，主干网基本上是用来委派事件的，所以在你的情况下主干网基本上是做

这个.el.on（'click'.page'，this.callme）

，

它应该是

事件：{…}

，不需要任何功能。一般来说，你不应该编辑你的标题来包含单词solved（其他人可以看到，由于字体颜色变为黄色，因此解决了此问题）.哦，糟糕，我以为这会对谷歌搜索结果有所帮助。哦，谢谢，错误已经消失了，但是你知道为什么它仍然没有发出任何警报吗？你可能还想将.page类添加到你的视图中。它将是视图中的一个属性，因此className:page，