根据 Polymer 中的列表选择填充内容

Question

我正在尝试在 Polymer 中使用应用程序布局“nav-list-detail”，但不确定如何select

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

我对 Polymer（尤其是 1.0）还很陌生，所以它可能是一个我所缺少的简单解决方案。

Answer 1

使用纸质菜单中选择的属性:

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

这会将 iron-selected class 添加到选定的纸张项目。我不确定 "populate the main content" 是什么意思。只需将您的菜单放在 dom-模块的主模板标签中。

对于初始列表，您可以将值添加到您的属性中：

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

Answer 2

如果你有这样的侧边菜单（注意 on-click="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>

您可以在paper-item上添加on-tap来执行menuSelected方法。

然后您可以使用 e.model.item 访问您点击的项目模型。

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

如果你的项目数组是一个对象数组，你将得到你选择的对象。

从这里您可以轻松地将其填充到您的 <div class="content">

根据 Polymer 中的列表选择填充内容

populate content based on list selection in Polymer

polymer