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框架，但我的猜测是它们提供了跳过property lookup chain.的部分内容，这意味着上面的内容会最终产生这个作为你的布局对象：

 layout {
    template: "#layout-template",

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

但是，由于我不使用backbone，我只能猜测一下。

您可以详细了解object model and how it works with inheritance right here.

在Javascript中访问对象文字

2 个答案: