Question

我对Backbone有点问题，我确定有人可以帮助我!!!

这是我的HTML：

<div id="slides">
    <div class="slide map">
        Map
    </div>
    <div class="slide points">
        Table
    </div>
</div>

和JS：

var SlideView = Backbone.View.extend({
    tagName: 'div',
    className: 'slide map',

    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

var slideView = new SlideView();

当我点击div时，不会执行回调!!!

Answer 1

您的代码看起来不错，您在事件映射中错过了元素ID。请尝试以下代码。

events: {
    'click #slides': 'onClick'
}

Answer 2

您遇到的问题是您的视图不知道页面上的HTML。如果你没有设置视图的el元素，它就不会将事件绑定到DOM元素。

要使您的示例正常工作，您可以执行以下操作。 view.setElement()

var slideView = new SlideView();
slideView.setElement($('div.slide.map'));

tagName和className不会从DOM中选择那些元素，它实际上会创建一个新元素作为视图的根，在本例中为<div class="slide map"></div>

但最终你应该在视图原型上设置el属性。

var SlideView = Backbone.View.extend({
    el: 'div.slide.map',    
    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

或者更好的是，在其中创建包含HTML的视图，然后在页面上添加对它的引用。

var SlideView = Backbone.View.extend({
    tagName: 'div',
    className: 'slide map',

    render: function(){
        // this.$el is a equiv. to $(<[tagName] class="[className]"></[tagName>);
        this.$el.html("/* HTML String to go inside the tag */");
        return this;
    },

    events: {
        'click': 'onClick'
    },

    onClick: function() {
        console.log("event !!!");
    }
});

var slideView = new SlideView();
slideView.render();

$('#slides').prepend(slideView.$el);

骨干鼠标单击无效

2 个答案: