如何在backbone.js中的视图方法中定义视图元素？

Question

构建视图以控制可重用的ui控件（制表符，模态，警报等）。我希望能够调用ui.tabs(options)，然后创建视图'对象'。

我设法到目前为止我可以致电ui.tabs(options)。但现在我无法弄清楚如何使用views方法设置元素（即：tabs()）。当我将模板设置为this.el，this.$el或this.$el.html时，我只会收到一个未定义的错误。

有人可以解释我哪里出错吗？

到目前为止，这是我的代码（简单我知道）：

/* UI Tools */
define(
    [
        "backbone",
        "text!templates/ui-tabs.html"
    ],
    function (Backbone, tabsTemplate) {
        var uiView = Backbone.View.extend({
            events: {
                "click .tab": "clickTab"
            },

            initalize: function () {

            },


            /*
             * TAB CONTROLS
             */
            tabs: function (options) {
                console.log(options);
                console.log(this.$el);

                this.el = $(_.template(tabsTemplate, options));


            },

            clickTab: function () {
                console.log('tab clicked');
            },

            /*
             * MODAL CONTROLS
             */
            modal: function () {

            },


            /*
             * ALERT CONTROLS
             */
            alert: function () {

            },


            /*
             * CORE
             */
            render: function () {
                return this.$el;
            }



        });

        return new uiView();
    }
);

Answer 1

使用Underscore的模板

_.template返回一个函数。使用返回的函数呈现模板：

var templateFunc = _.template(tabsTemplate, options); // returns a function
templateFunc({ you: "data" }); // returns a string

Additional information

更改el

✘不要设置el或$el这样：

this.el = /* ... */;

✔相反，请使用this.setElement ，以确保正确设置el和$el并重新委派事件：

this.setElement(this.template());

• Difference between el and $el
• Using setElement with views in backbone

制作可重复使用的组件

在我制作的Backbone应用程序中，我为每个可重用的组件创建了一个视图，而不是为所有组件创建了一个实例。

拆分视图并返回构造函数以在需要时构建组件。

define([/* ... */], function(/* ... */) {
    var ModalView = Backbone.View.extend({
        /* ... */
    });

    return ModalView;
});

对每个组件都这样做。

然后在更大的组件中，如页面布局，使用许多较小的组件。

define([
    'modal-view',
    'tabs-view'
], function(ModalView, TabsView) {
    var Layout = Backbone.View.extend({
        /* ... */
        initialize: function(){
            this.view = {
                modal: new ModalView(),
                tabs: new TabsView(),
            };
        },
    });

    return Layout;
});