聚合物dom-repeat不会将属性加载到子元素

Question

我在Polymer Web组件中有以下代码：

<template is="dom-repeat" items="{{sections}}">
  <paper-item data-page="{{item.name}}" on-tap="changeTab" sectionid="{{item.id}}">{{item.name}}</paper-item>
</template>

其中sections的定义如下：

sections: {
  type: Array,
  value: [
    {
      name: 'Chaquetas',
      id: '1'
    },
    {
      name: 'Camisas',
      id: '2'
    },
    {
      name: 'Pantalones',
      id: '3'
    },
    {
      name: 'Faldas',
      id: '4'
    },
    {
      name: 'Chaquetas',
      id: '5'
    }
  ]
}

我的问题是，呈现HTML之后，属性data-page和sectionid不会在<paper-item>的元素检查item.name显示，而item.name正确显示，如下所示。

<paper-item class="style-scope blackbart-app x-scope paper-item-0" role="option" tabindex="0" aria-disabled="false">
    Chaquetas
</paper-item>
(...)

有人可以向我解释我所缺少的吗？

提前致谢。

Answer 1

你有当前的代码结合item.name到的属性 <paper-item>命名dataPage ; 和item.id到一个名为财产 sectionid 。 属性不会在检查器中显示为元素上的属性。

要绑定属性，请使用Polymer的属性绑定语法（即attr-name$=binding ）：

<paper-item data-page$="[[item.name]]" sectionid$="[[item.id]]">

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { items: { type: Array, value: () => [{ name: 'Chaquetas', id: '1' }, { name: 'Camisas', id: '2' }, { name: 'Pantalones', id: '3' }, { name: 'Faldas', id: '4' }, { name: 'Chaquetas', id: '5' }] } } }); });

 <head> <base href="https://polygit.org/polymer+1.7.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-menu/paper-menu.html"> <link rel="import" href="paper-item/paper-item.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <paper-menu> <template is="dom-repeat" items="[[items]]"> <paper-item data-page$="[[item.name]]" sectionid$="[[item.id]]">[[item.name]]</paper-item> </template> </paper-menu> </template> </dom-module> </body>

码笔

聚合物dom-repeat不会将属性加载到子元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-31 18:44:55

聚合物dom-repeat不会将属性加载到子元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-31 18:44:55

解决方案1
1 已采纳 2016-10-31 18:44:55