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

Question

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

userNameAsyncValidator()

其中<template is="dom-repeat" items="{{sections}}"> <paper-item data-page="{{item.name}}" on-tap="changeTab" sectionid="{{item.id}}">{{item.name}}</paper-item> </template> 的定义如下：

sections

我的问题是，在呈现HTML后，sections: { type: Array, value: [ { name: 'Chaquetas', id: '1' }, { name: 'Camisas', id: '2' }, { name: 'Pantalones', id: '3' }, { name: 'Faldas', id: '4' }, { name: 'Chaquetas', id: '5' } ] } 上的元素检查器中未显示属性data-page和sectionid，而<paper-item>正确显示，如图所示下方。

item.name

有人可以向我解释我错过了什么吗？

提前致谢。

Answer 1

您已将item.name绑定到名为<paper-item>的{​​{1}}的属性的当前代码;和dataPage到名为item.id的属性。属性不会作为元素的属性出现在检查器中。

要绑定属性，请使用Polymer的attribute-binding syntax（即sectionid）：

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'
        }]
      }
    }
  });
});

codepen