聚合物数字重复模板

Question

我有一个组件可以获取 JSON 个对象的列表。

我想这样做：{{i+1}} 在 <p>-Tag 的输出中有效（如果 i=0 它显示 1）

但是，如果我对 <event-component> 中的属性 number 尝试此操作，则它不起作用。输出是：<event-component number= {{i+1}}>

有什么建议吗？

<template repeat="{{event, i in data}}">
        <p> {{i+1}} {{event.title}} </p> 
        <p> {{event.description}} </p> 
        <event-component number= '{{i+1}}' detail= 'false'></event-component>
    </template>

Answer 1

问题出在您未提供的代码中。让我们简化代码段：

<polymer-element name="my-polymer-el">
    <template>
      <template repeat="{{event,i in data}}">
        <p><em> {{i+1}} </em></p> 
        <p><b> {{event.name}} </b></p> 
      </template>
      <select>
        <template repeat="{{event,i in data}}">
          <option value="{{i+1}}"> {{i+1}} :: {{event.name}} </opion> 
        </template>
      </select>
    </template>  
    <script>
      Polymer({
        publish: { data: { value: [
          {name:'First'},
          {name:'Second'},
        ], reflect: true } }
      });
    </script>
  </polymer-element>

输出符合预期：i+1 处处计算。您应该仔细检查 event-component 代码 and/or 您的脚本。

实时预览：http://plnkr.co/edit/ebEI0CptyBMOqtii86Vw?p=preview

聚合物数字重复模板

Polymer numeric repeat template

html

javascript

web-component

polymer