Question

我试图使用应用程序布局＆＃34; nav-list-detail＆＃34;在聚合物中，但不知道如何从

中选择一些东西

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

如果你有这样的侧边菜单（注意点击后退＆＃34; menuSelected＆＃34; ）：

<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 上添加点按，以执行 menuSelected 方法。

然后您可以使用 e.model.item 来访问您点击的商品模型。

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

如果您的items数组是一个对象数组，您将获得所选对象。

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

Answer 2

使用纸张菜单的选定属性：

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

这会将iron-selected类添加到所选的纸质项目中。我不确定你的意思＆＃34;填充主要内容＆＃34;。只需将您的菜单放在dom-module的主模板标签中即可。

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

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

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

2 个答案: