javascript - backbone.js - 简单 View

Question

我正在尝试在 backbone.js 中运行非常简单的 View 这是代码:

(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>

当页面加载时，它会提示此 alert('templateLoaderView - initialize');，但是当我单击 div 时，没有任何反应。你能告诉我我做错了什么吗？

Answer 1

有几处地方出了问题。

• 当您创建 View 时，它会将 this.el 创建为一个 DIV，但它并不 Root 于任何内容
• 您的事件试图 Hook View 的 DIV，它没有内部 #add_contact
• 您不会收到有关 render 的警报，因为没有任何东西会调用 render。

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

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

更进一步...

不过，您可能希望在您的 View 中创建您的 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);
});