javascript-bone.js-简单视图

我正在尝试在ribs.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>

页面加载时,它会发出警报(‘templateLoaderView-initialize’)；但是,当我单击div时,什么也没有发生.
你能告诉我我做错了吗？

解决方法:

有几件事情出了问题.

>创建视图时,它会将this.el创建为DIV,但它并不植根于任何东西
>您的活动正在尝试挂钩该视图的DIV,该视图没有内部#add_contact
>您不会收到有关渲染的警报,因为什么都没有调用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,javascript
来源： https://codeday.me/bug/20191202/2086960.html