0

此代码是 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);
        },
4

2 回答 2

0

我相信它是这样实现的，因为“layout.menu”比“layout.regions.menu”更短更简单。看起来您希望将文字“#menu”替换为区域管理器对象。

您在创建视图时传入的选项，包括模板，可以在 layout.options 中找到。所以在你的情况下 layout.options.template 应该等于'#layout-template'，并且区域定义哈希将在 layout.options.regions... 仍然是同一级别。

于 2013-03-27T18:50:01.830 回答
0

除非该示例有更多内容，否则您会像方法一样显示，否则它不会像您想象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.

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

于 2013-03-27T18:56:49.897 回答