Javascript backbone.js-简单视图

我正在尝试在backbone.js中运行非常简单的视图 代码如下：

(function($){

    window.templateLoaderView = Backbone.View.extend({

        events: {
            'click #add_contact': 'loadTaskPopup'
        },

        initialize: function () {
            alert('templateLoaderView - initialize');
            _.bindAll(this, 'render');
        },


        render: function() {
            alert('templateLoaderView - render');
        },

        loadTaskPopup: function() {
            alert('templateLoaderView - loadTaskPopup');
        }
    });

})(jQuery);
$(document).ready(function() {
    window.templateLoaderView = new templateLoaderView();
});

<div id="add_contact">CLICK HERE</div>

（函数（$）{
window.templateLoaderView=Backbone.View.extend({
活动：{
'单击#添加联系人'：'loadTaskPopup'
},
初始化：函数（）{
警报（“templateLoaderView-初始化”）；
_.bindAll（这是“呈现”）；
},
render:function（）{
警报（'templateLoaderView-render'）；
},
loadTaskPopup:function（）{
警报（“templateLoaderView-loadTaskPopup”）；
}
});
})（jQuery）；
$（文档）.ready（函数（）{
window.templateLoaderView=新的templateLoaderView（）；
});
点击这里

当页面加载时，它会提醒这个

alert（'templateLoaderView-initialize'），但当我单击div时，什么也没有发生。
你能告诉我我做错了什么吗
 有几件事出了问题


当您创建视图时，它将
this.el
创建为一个DIV，但它不扎根于任何内容
您的事件正试图挂接到视图的DIV上，该DIV没有内部的
#add_contact
您不会收到有关
render
的警报，因为从来没有调用
render


让单击处理程序工作的最简单方法是告诉视图要附加到哪个元素：

window.templateLoaderView = new templateLoaderView({el: $("body") });

更进一步…

不过，您可能希望在视图中创建DIV。。。它会有点像这样：

(function($){

    window.templateLoaderView = Backbone.View.extend({

        template: _.template('<div id="add_contact">CLICK HERE</div>'),

        events: {
            'click #add_contact': 'loadTaskPopup'
        },

        render: function() {
            $(this.el).html(this.template());
            return this;
        },

        loadTaskPopup: function() {
            alert('templateLoaderView - loadTaskPopup');
        }
    });

})(jQuery);

$(document).ready(function() {
    window.templateLoaderView = new templateLoaderView();
    $("body").append(window.templateLoaderView.render().el);
});

（函数（$）{
window.templateLoaderView=Backbone.View.extend({
模板：u.template（'单击此处'），
活动：{
'单击#添加联系人'：'loadTaskPopup'
},
render:function（）{
$（this.el）.html（this.template（））；
归还这个；
},
loadTaskPopup:function（）{
警报（“templateLoaderView-loadTaskPopup”）；
}
});
})（jQuery）；
$（文档）.ready（函数（）{
window.templateLoaderView=新的templateLoaderView（）；
$（“body”）.append（window.templateLoaderView.render（）.el）；
});
Demo：没问题；最好是“显示代码”，但在上面添加一个提琴演示会更容易提供帮助。我通常喜欢在合适的时候添加一个模板，并且有足够的模板可以使用；这是一个好的演示吗？我从这里链接的jsfiddle中改编了它：我不太确定
\uuu.bindAll（这个“render”）。我不知道它应该做什么。我正在测试，意识到它在我的el之外看不到任何东西。我是这样做的：
$（'add#contact'）。单击（function（）{window.templateLoaderView.loadTaskPopup（）；}）。“它起作用了，但我想知道这是否是正确的方法？”贾雷德法里什说，“是的，那把小提琴确实有用。”。我用它提出了两种解决方案。@user616822我想你误解了
\uu.bindAll
的作用。它不会为你触发任何东西。它将函数绑定为对象的上下文，这样，如果
render
作为回调调用，您仍然可以将
this
引用为对象，而不是调用方。由于在您的示例中这两种情况都不是这样，因此我在解决方案中删除了
\uu.bindAll
。