填入內容根據列表選擇在高分子

Question

我想使用的應用程序佈局「nav-list-detail」的聚合物，但不知道如何從

<!-- List --> 
<paper-menu class="list" on-iron-activate="_listTap"> 
    <template is="dom-repeat" items="{{items}}"> 
    <paper-item><span class="paper-font-body1">{{item}}</span></paper-item> 
    </template> 
</paper-menu> 

選擇的東西，有它填充

<!-- Main Content --> 
<div class="content"></div> 

我的模型是

<script> 
(function() { 
    Polymer({ 
    is: 'nav-list-detail', 

    _computeListWidth: function(isMobile) { 
     // when in mobile screen size, make the list be 100% width to cover the whole screen 
     return isMobile ? '100%' : '33%'; 
    }, 
    _listTap: function() { 
     this.$.mainDrawerPanel.closeDrawer(); 
    }, 

    properties: { 
     items: { 
     type: Array, 
     notify: true, 
     } 
    }, 
    ready: function() { 
    this.items = [ 
     'Item 1', 
     'Item 2', 
     'Item 3', 
     'Item 4', 
     'Item 5' 
     ] 
    } 
    }); 
})(); 
</script> 

我與聚合物（尤其是1.0）相當新的，因此它可能b一個簡單的解決方案，我只是想念。

Answer 1

如果你有一個這樣的側菜單（注意上點擊=「menuSelected」）：

<dom-module id="dmf-menu"> 
<template> 
    <paper-menu> 
     <template is="dom-repeat" items="{{modules}}"> 
      <paper-item on-tap="menuSelected">{{item.name}}</paper-item> 
     </template> 
    </paper-menu> 
</template> 

您可以在紙項目加上抽頭 執行menuSelected方法。

然後您可以使用e.model.item訪問您點擊的項目模型。

<script> 
    (function() { 
     Polymer({ 
      is: 'nav-list-detail', 
      menuSelected: function (e) { 
       console.log(e.model.item); 
      } 
     }); 
    })(); 
</script> 

如果你有你的物品數組是一個對象數組，你將得到你選擇的物體。

從這裏你可以輕鬆地填充到您的<div class="content">

Answer 2

使用紙質菜單的選擇特性：

<paper-menu class="list" selected={{selectedItem}} > 

這增加了iron-selected類所選的紙張項。我不確定你的意思是「填充主要內容」。只需將你的菜單放在你的dom模塊的主模板標籤內。

對於初始列表中，您可將值添加到您的屬性：

properties: { 
    items: { 
    type: Array, 
    value: [ 
     'Item 1', 
     'Item 2', 
     'Item 3', 
     'Item 4', 
     'Item 5' 
     ], 
    notify: true 
    } 
},