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

Question

在创建一个视图以控制可重复使用的 ui 控件（选项卡、模式、警报等）。我希望能够调用 ui.tabs(options)，这将创建视图 'object'。

我已经设法做到了，我可以打电话给 ui.tabs(options)。但是现在我无法 quite 弄清楚如何使用视图方法设置元素（即：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 的模板

_.templatereturn是一个函数。使用 returned 函数呈现模板：

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

改变`el`

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

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

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

this.setElement(this.template());

Using setElement with views in backbone

制作可重复使用的组件

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

拆分视图和 return 构造函数以在需要时构建组件。

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

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

How to define view Element within a view's method in backbone.js?

javascript

jquery

backbone.js

使用 Underscore 的模板

改变`el`

制作可重复使用的组件

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

How to define view Element within a view's method in backbone.js?

javascript

jquery

backbone.js

使用 Underscore 的模板

改变el

制作可重复使用的组件

改变`el`