在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 。

您可以在此处了解有关对象模型及其如何与继承一起工作的更多信息。