在Javascript中訪問對象文字

Question

此代碼是Marionette的示例：

AppLayout = Backbone.Marionette.Layout.extend(
{
    template: "#layout-template",

    regions: 
    {
        menu: "#menu",
        content: "#content"
    }
});

var layout = new AppLayout();

layout.menu.show(new MenuView());
layout.content.show(new MainContentView());

最后兩行使我感到困惑。 為什么不顯示：

layout.regions.menu.show(new MenuView());
layout.regions.content.show(new MainContentView());

有人可以解釋為什么layout.menu起作用而layout.regions.menu不能起作用嗎？

如果我想訪問模板怎么辦？ 那不是layout.template嗎？ 模板和區域在布局內的深度相同。

這是牽線木偶代碼的構造函數：

// Ensure the regions are avialable when the `initialize` method
        // is called.
        constructor: function () {
            this._firstRender = true;
            this.initializeRegions();

            var args = Array.prototype.slice.apply(arguments);
            Marionette.ItemView.apply(this, args);
        },

Answer 1

我相信這樣做是因為“ layout.menu”比“ layout.regions.menu”更短，更簡單。 看起來您希望將文字“ #menu”替換為區域管理器對象。

您在創建視圖時傳遞的選項（包括模板）可以在layout.options中找到。 因此，在您的情況下，layout.options.template應該等於'＃layout-template'，並且區域定義哈希將位於layout.options.regions ...仍處於同一級別。

Answer 2

除非該示例有更多內容，否則您將像Backbone.Marionette.Layout方法那樣顯示，那么它就不會像您認為的那樣訪問regions.menu 。

僅使用您提供的代碼，上面的代碼實際上創建了一個menu屬性，然后它具有一個show屬性，因此您的layout對象實際上如下所示：

layout {
    menu : {
        show : new MenuView
    },
    content : {
         show : new MainContentView
    },

    template: "#layout-template",

    regions: 
    {
        menu: "#menu",
        content: "#content"
    }
}

在javascript中， (dot)運算符可用於訪問屬性的屬性，或者如果不存在具有該名稱的屬性，則它將創建該屬性。

我不熟悉backbone.js框架，但我猜想它們提供了跳過屬性查找鏈的一部分的功能。 這意味着以上內容最終將其作為布局對象生成：

 layout {
    template: "#layout-template",

    regions: 
    {
        menu : {
            show : new MenuView
        },
        content : {
            show : new MainContentView
        }
    }
}

但這又只是我的猜測，因為我不使用backbone 。

您可以在此處了解有關對象模型及其如何與繼承一起工作的更多信息。