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

【问题标题】：Polymer dom-repeat don't load attributes to child elements聚合物 dom-repeat 不会将属性加载到子元素
【发布时间】：2016-10-31 17:53:49
【问题描述】：

我在 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后，<paper-item>的元素检查器中没有显示属性data-page和sectionid，而item.name显示正确，如下所示。

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

有人可以向我解释我缺少什么吗？

提前致谢。

【问题讨论】：

标签： data-binding polymer

【解决方案1】：

当前代码将item.name 绑定到<paper-item> 的属性，名为dataPage；和item.id 到一个名为sectionid 的属性。属性不会作为元素的属性出现在检查器中。

要绑定属性，请使用 Polymer 的attribute-binding syntax（即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>

codepen

【讨论】：