Question

我一直在努力学习backbone.js，但是当我点击主页链接时，我无法弄清楚为什么我的点击事件没有被触发。我对骨干很新，我只是不确定我错过了什么？我在网上查了一堆不同的教程，但似乎无法找到丢失的漏洞。请帮忙！

Backbone.js的

    var HomeView = Backbone.View.extend({
        el: $('.content'),

        events:{
            "click #home": "animateNavigation"
        },
        initialize: function(){
            _.bindAll(this, 'displayTrips'); 

            // Add the model collections
            this.collection = new ModelList();
            this.collection.bind('add', this.displayTrips); // Collection event binder
        },
        animateNavigation: function(){
            alert('test');

            return false;
        },
        displayTrips: function(params){
            var items = params.get('data');
        }
    });

    var home_view = new HomeView();

HTML

<div class="content">
     <div class="left">
        <ul>
            <li>
                <div class="nav_arrow"></div>                   
                <a href="home" class="active" id="home">
                    <img alt="Home" src="/assets/img/nav/left/star.png">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="tropical" id="tropical">
                    <img alt="Tropical" src="/assets/img/nav/left/fins_grey.png">
                    <span>Tropical</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Answer 1

您在声明模型时找到元素。如果脚本位于标题中或此内容之前的任何位置，则该元素尚不存在。我不知道在这里使用$('.content')应该有任何合理的理由，只需使用'.content'

编辑：嗯，我看到你也在宣布你的观点的新实例。我不知道该行是否代表您在脚本中的字面意思，或者您只是将其放在那里以展示您的基本用途。我通常在页面逻辑中定义视图和模型（其中包含那些事物的实例），主要是为了让我可以重用它们。

Answer 2

你可以添加

吗？

console.log(home_view.$el.html());

最后，请检查home_view的Dom Element。我认为将视图绑定到Dom元素时会出现问题。

Answer 3

我发现这为我解决了这个问题：

var home_view = new HomeView({el:$('.content')});

更新 - 比这更好，这样做：

var home_view = new HomeView({el:'.content'});

然后this.$el将按照上面的帖子说的那样工作

Backbone.js单击事件不会触发

3 个答案: