聚合物 - 自定义元素内容答案

【问题标题】：Polymer - Custom Element Content聚合物 - 自定义元素内容
【发布时间】：2016-01-01 02:53:41
【问题描述】：

我正在学习 Polymer。我正在开发自定义元素。我有它here。我的元素加载了一些数据。这时候，我的元素是这样的：

<dom-module id="data-library">  
  <template>
    <paper-header-panel flex>
      <div class="flex">
        <template is="dom-repeat" items="[[ items ]]" as="item">
          <div>[[ item.firstName ]]</div>
        </template>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "data-library",
      properties: {
        items: {
          type: Object,
          value: function() {
            return [];
          }
        }
      },

      ready: function() {
        this.push('items', { firstName: 'John' });
        this.push('items', { firstName: 'Bill' });
      }
    });
  </script> 
</dom-module>

我希望消费者能够对项目的布局进行一些控制。现在，这些项目总是垂直列出。但是，我想让消费者执行以下操作：

<data-library>
  <item-template><b>[[ item.firstName ]]</b></item-template>
</data-library>

在这种情况下，消费者告诉自定义控件要使用的项目模板。有没有办法在 Polymer 中做这样的事情？如果有，怎么做？

【问题讨论】：

标签： polymer

【解决方案1】：

这并不容易。 iron-list 元素做了类似的事情。来源应该作为灵感。使用 iron-list，您可以通过 <template><item-template>...</item-template>custom-content</template>

【讨论】：