Accessing object literals in Javascript

Question

This code is an example from 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());

The last two lines confuse me. Why doesn't it read:

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

Can someone please explain why layout.menu works and layout.regions.menu doesn't?

What if I wanted to access template? Wouldn't that be layout.template? template and regions are at the same depth inside layout.

Here is the constructor function from the marionette code:

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

I believe it was implemented that way because 'layout.menu' is shorter and simpler than 'layout.regions.menu'. Looks like you expected the literal "#menu" to be replaced with a region manager object.

The options you passed in when creating the view, including the template, can be found in layout.options. So in your case layout.options.template should equal '#layout-template', and the regions definition hash would be at layout.options.regions... still the same level.

Answer 2

Unless there is more to the example then you are showing like the Backbone.Marionette.Layout methods, then its not accessing regions.menu like you think it is.

With just the code you have provided the code above is actually creating a menu attribute, which then has a show attribute so your layout object would actually look like this:

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

    template: "#layout-template",

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

In javascript the (dot) operator can be used to access a property of an attribute or if no property with that name exists then it will create that property.

I'm not familiar with the backbone.js framework but my guess is that they provide for skipping part of the property lookup chain. which means that the above would end up producing this as your layout object:

 layout {
    template: "#layout-template",

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

But again that's just a guess on my part since I don't use backbone .

You can learn more about the object model and how it works with inheritance right here.