訪問對象文字的Javascript

此代碼是從木偶的例子：訪問對象文字的Javascript

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); 
     },

來源

2013-03-27 KingAndrew

記錄對象並檢查它們！ – Mathletics 2013-03-27 18:53:29

child {_firstRender：true，regionManagers：Object，menu：Marionette.Region，content：Marionette.Region，render：function ...} $ el：jQuery.fn.jQuery.init [1] _events：Object _firstRender：true _listenerId：「L12」 _listeners：對象 CID：「view11」內容：Marionette.Region EL：「＃內容」 getEl：功能（選擇器）{ 選項：對象 __proto__：對象 EL：DIV 菜單：木偶。地區 EL：「#menu」 getEl：功能（選擇）{ 選項：對象 __proto__：對象選項：對象 regionManagers：對象呈現：功能約束（）{ __proto__：代孕 – KingAndrew 2013-03-27 19:35:38

很抱歉，但有ISN」 t評論的代碼視圖。 – KingAndrew 2013-03-27 19:36:32

我相信這是實現這種方式，因爲「layout.menu」比「layout.regions.menu」短，更簡單。看起來像你期望的文字「#menu」被替換爲區域管理器對象。

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

來源

2013-03-27 18:50:01

我同意 'layout.menu' 是短和更簡單的而不是'layout.regions.menu'，但通常程序員沒有能力按照「它必須」的方式按照他們想要的方式創建事物。 – KingAndrew 2013-03-27 19:27:24

那麼你是說擴展方法中的大括號作爲擴展方法的一個選項？ .extend（ { 模板：「＃佈局模板」，區域： { 菜單：「#menu」，內容：「＃內容」 } }）; – KingAndrew 2013-03-27 19:39:04

如果是這樣，那麼這可能會解釋我的困惑。我在想，結構.extends（{...這裏的東西在這裏...}）是如何在構造的對象，但如果它實際上只是一個選項對象傳遞到擴展方法，我可以瞭解如何這可能是開發者想要的。 – KingAndrew 2013-03-27 19:49:41

除非更多的例子，然後你顯示像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.

來源

2013-03-27 18:56:49 Ryan

這裏是我從那裏得到的例子的鏈接：https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md – KingAndrew 2013-03-27 19:23:48

@KingAndrew所以我是正確的;當你調用'layout.render（）'時，它會讓'layout'直接訪問所有'regions'，所以你最終會得到類似於我的第二個代碼示例的東西。 – Ryan 2013-03-27 19:40:50

我看了一下代碼，它有這樣的評論：//初始化這個佈局的 //'regions'屬性中定義的區域。 //散列密鑰 //直接成爲佈局對象的屬性。 //例如：'地區：{menu：「.menu-container」}' //將產生一個'layout.menu'對象，它是一個區域 //控制'.menu-container' DOM元素。 – KingAndrew 2013-03-27 20:01:42

訪問對象文字的Javascript

回答

相關問題