鼠标点击骨干没有效果

Backbone mouse click no effect

本文关键字：有效果 鼠标      更新时间：2023-09-26

我有一个小问题的骨干，我相信有人可以帮助我!

这是我的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时，回调不会被执行!!

您的代码看起来不错，只是在事件映射中遗漏了元素id。请尝试以下代码。

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

问题是视图不知道页面上的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);
相关文章：