混淆骨干.js中的this.el和子視圖

Question

我對骨干.js中的子視圖有很大的疑問。 我有兩個視圖，我想將第二個視圖渲染為第一個視圖的元素。 所以我在第二個視圖中定義了this.el ，該視圖在第一個視圖中引用了一個節（section＃user-data）。

我在渲染第一個視圖之后創建了第二個視圖的對象，並且如果在創建對象之前寫了alert($('#user-data').length) ，我將得到1，因此它存在。

但是在第二個視圖中，我得到了一個不確定的信息。 如果我以任何方法登錄this.el 但是，如果我在this.el使用例如body，一切都會按預期進行。

是什么原因呢？

例：

   /**
     * 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;

                });

Answer 1

這是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')
    });
    // ...
});

通過這種方式，您不必在ProfileSelectionView定義一個initialize函數。