Backbone.js 查看事件未触发答案

【问题标题】：Backbone.js View Event Not FiringBackbone.js 查看事件未触发
【发布时间】：2012-04-16 12:10:54
【问题描述】：

我在让我的主干.js 视图事件触发时遇到问题。当我单击#login-button 时，什么也没有发生。

我也在使用 iCanHaz (http://icanhazjs.com/) 来加载模板。

这是我的 javascript：

$(function() {
 var router = new App.Router;
 Backbone.history.start();
});

App.Router = Backbone.Router.extend({
 routes: {
    "login": "login"
 },

login: function() {
    var view = new App.Views.LoginView;
 }
});

App.Views.LoginView = Backbone.View.extend({

 el: '#login',

 initialize: function() {

    _.bindAll(this, 'render', 'validateLogin');
    this.render();

 },

 render: function() {
    App.Stage.html(ich.loginView());
 },

 events: {
    'click button#login-button' : 'validateLogin'
 },

 validateLogin: function(event) {
     console.log("validateLogin fired.");
 }

});

这是我的标记（使用 ICanHaz.js）：

<script id="loginView" type="text/html">
        <div data-role="page" id="login" class="container">
            <div class="hero-unit">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="form-horizontal">
                        <fieldset>
                            <legend>Please login to continue</legend>
                            <div class="control-group">
                            <label class="control-label" for="username">Username</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="username">
                            </div>
                            </div>

                                <div class="control-group">
                            <label class="control-label" for="password">Password</label>
                            <div class="controls">
                                <input type="password" class="input-xlarge" id="password">
                            </div>
                            </div>

                                <div class="form-actions">
                        <button id="login-button" class="btn btn-primary btn-large">Login</button>
                    </div>
                        </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

【问题讨论】：

您的登录视图模板是否实际呈现到屏幕上？
是的，一切正常，没有控制台错误。我点击了按钮，但没有触发事件。

标签： javascript backbone.js backbone-events icanhaz.js backbone-views

【解决方案1】：

我想通了。 Backbone 在创建之前将事件绑定到 el。在异步 iCanHaz 调用的回调中，我使用了 this.setElement('#login') 并且效果很好。来自backbone.js 文档：

setElement [view.setElement(element)]

"如果您想将 Backbone 视图应用到不同的 DOM 元素，请使用 setElement，它还将创建缓存的 $el 引用并将视图的委托事件从旧元素移动到新元素。”

【讨论】：

感谢您对我的帮助！
在某些情况下，可能只需要调用view.delegateEvents()。

【解决方案2】：

我相信您没有正确使用视图的“el”属性。尝试让属性引用 jQuery DOM 对象而不仅仅是 ID，如下所示：

App.Views.LoginView = Backbone.View.extend({

 el: $('#login')

...

【讨论】：

不走运。我也尝试像这样在我的路由器中设置它login: function() { if (App.User.isLoggedIn) { window.location.hash = 'home'; } else { var view = new App.Views.LoginView({ el: $('#login') }); } } 并且两次事件都没有触发并且 console.log(this.el) 是未定义的。
哦，我以前错过了，希望是这样：当您创建新的登录视图时，您必须按原样调用它（一个函数，而不是一个属性）。试试： var view = new App.Views.LoginView();