backbone.js - 简单视图

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时，什么也没有发生。 请问我做错了什么？

- kaha

---

演示：http://jsfiddle.net/CPPsh/ - Jared Farrish

没问题，展示代码是最好的做法，但在此基础上添加一个fiddle演示会更容易得到帮助。如果情况适当且足够充分，我通常会添加一个fiddle演示。 - Jared Farrish

有关Backbone.js模板教程，请参见：http://backbonetutorials.com/what-is-a-view/ - Jared Farrish

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);
});

- Brian Genisio

---

我对Backbone不是很熟悉，这个演示是否好用？http://jsfiddle.net/CPPsh/1/ 我是从这里链接的jsfiddle进行了改编：http://backbonetutorials.com/what-is-a-view/ - Jared Farrish

我不是很确定 _.bindAll(this, 'render'); 这一行的作用。 - Jared Farrish

@JaredFarrish 是的，那个 Fiddle 绝对有帮助。我用它来想出了这两个解决方案。 - Brian Genisio

我也是。我以为 _.bindAll(this, 'render'); 会在调用任何其他函数时触发 render 函数。即使我能够调用 loadTaskPopup()，我还是不得不在 loadTaskPopup() 中编写 this.render(); 来运行 render。 - kaha

@user616822，我认为你误解了_.bindAll的作用。它不会自动触发任何操作。它将函数绑定到对象的上下文中，因此如果render作为回调被调用，您仍然可以将this引用为对象，而不是调用者。由于在您的示例中没有这些情况，因此我在我的解决方案中删除了_.bindAll。 - Brian Genisio