Question

我试图在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>

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

Answer 1

有几件事情出了问题。

创建视图时，它会将this.el创建为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);
});

backbone.js - 简单的视图

1 个答案: