简单的视图

simple view

本文关键字：视图 简单      更新时间：2023-09-26

我试图在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时，什么也没有发生。你能告诉我哪里做错了吗?

有几件事出错了。

  • 当你创建视图时，它创建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);
});
相关文章：