javascript - 混淆 Backbone .js中的this.el和 subview

我对骨干.js中的子视图有很大的疑问。
我有两个视图，我想将第二个视图渲染为第一个视图的元素。
所以我在第二个视图中定义了this.el，它引用了第一个视图中的一个部分（section＃user-data）。

我在渲染第一个视图之后并且如果我写了第二个视图的对象
alert($('#user-data').length)在创建对象之前，我得到了1，所以它存在。

但是在第二个视图中，我得到了一个不确定的信息。
如果我以任何方法登录this.el。
但是如果我使用例如this.el的正文一切正常。

是什么原因呢？

例：

   /**
     * The example of a view for profile's component
     *
     *
     * @module Profile
     * @submodule Frontend
     * @class ProfileView
     * @constructor
     *
     */
    ProfileView = Backbone.View.extend({

        // The tagname wrapping the rendered content
        // The template for the current view
        template : _.template('COMPONENTS_VIEW_FRAME'),

        /**
         * The initialisation for the current view (kind of constructor)
         *
         * @method initialize
         */
        initialize : function() {
        },

        /**
         * The rendering process for the current view
         *
         * @method render
         * @param {String} oLocas the data to render inside this view
         */
        render : function(oLocas) {

            $(this.el).html(this.template(oLocas));

            return this;
        }
    });

           /**
     * The example of a view for profile's component
     *
     *
     * @module Profile
     * @submodule Frontend
     * @class ProfileView
     * @constructor
     *
     */
    ProfileSectionView = Backbone.View.extend({

        // The tagname wrapping the rendered content

        // The template for the current view
        template : _.template('COMPONENTS_VIEW_OPTION_SECTION'),

        el : $('#user-data'),

        events : {
            'click a.open_close_section' : 'doIt'
        },

        headline : 'ddd',

        /**
         * The initialisation for the current view (kind of constructor)
         *
         * @method initialize
         */
        initialize : function() {
            alert($(this.el).length);
        },

        doIt : function(event) {
            alert('jo');
        },

/**
         * The rendering process for the current view
         *
         * @method render
         * @param {String} eventName the name of the triggered event
         */
        render : function(oLocas) {

            $(this.el).html(this.template(oLocas));

            return this;
        }
    });
            // Here I start to use the first view
            var oProfileView = new ProfileView();

                $('#profile').html(oProfileView.render().el).fadeIn(500,    function() {

                    $(this).removeClass('closed');
                                            // Here I create the second view
                    var oProfileSectionView = new ProfileSectionView({
                        model : this.model
                    });

                    oProfileSectionView.render({
                        headline : 'XXX',
                        sectionrows : 'ddd'
                    }).el;

                });

最佳答案

这是JavaScript的小技巧。

定义ProfileSelectionView时，JavaScript正在寻找该元素。所以这：

ProfileSectionView = Backbone.View.extend({
    // ...
    el : $('#user-data'),
    // ...
});

实际上是在ProfileSelectionView的定义中进行评估，而不是稍后实例化ProfileSelectionView的实例时进行评估。

要解决此问题，请将el的定义移至初始化中：

ProfileSectionView = Backbone.View.extend({
    // ...
    // Do not define the el here. I've commented it out
    // el : $('#user-data'),
    // ...
    initialize : function() {
        this.setElement($('#user-data'));
    },
    // ...
});

甚至更好的是，您可以在创建ProfileSelectionView时将元素传入（如Backbone.js docs中所述）：

var oProfileView = new ProfileView();

$('#profile').html(oProfileView.render().el).fadeIn(500,    function() {
    // ...
    var oProfileSectionView = new ProfileSectionView({
        model : this.model,
        el: $('#user-data')
    });
    // ...
});

通过这种方式，您不必在initialize中定义ProfileSelectionView函数。