Question

今天，我想创建一个生成“卡片”列表的元素。在这些卡片上，根据它包含的页面，可能会有非常不同的东西。例如，有时这些卡片包含图片，有时可能会有联系信息（姓名，年龄，地址，电话......），有时可能只包含视频等...

所以我的想法是设计一个处理CSS的聚合物元素，对数据源的ajax调用，dom-repeat和一个<slot>（以前称为<content>）在此元素中，用于创建卡片内容（图片，视频或联系人卡片）的html模板

这是我到目前为止所做的：

父元素：

<tiles-list id="tilesView" datas="[[datas]]">
  <img src="https//lorempixel.com/200/130/people" />
  <p>[[item.name]]</p>
  <p>[[item.age]]</p>
  <p>[[item.adress]]</p>
  <p>[[item.phone]]</p>
</tiles-list>

{{datas}}将替换为ajax调用的URL

并在子元素中：

<iron-ajax
  auto
  url="[[datas]]"
  handle-as="json"
  last-response="{{ajax}}"
  on-response="log"></iron-ajax>

<div id="grid">
  <template is="dom-repeat" items="[[ajax.data]]">
    <div class="card gridCell">
      <slot></slot>
    </div>
  </template>
</div>

但是，它不起作用。我得到的是一张包含适量牌的列表，但只有第一张包含图片，但没有数据。所以我猜这个插槽不起作用，就像我试图让它工作一样，数据绑定也不能这样工作。

有人有解决方案吗？

Answer 1

我认为你想要实现的是Templatizer的完美案例。将您的代码更改为：

<tiles-list id="tilesView" datas="[[datas]]">
     <template tile>
        <img src="https//lorempixel.com/200/130/people" />
        <p>[[item.name]]</p>
        <p>[[item.age]]</p>
        <p>[[item.adress]]</p>
        <p>[[item.phone]]</p>
    </template>
</tiles-list>

然后当你的ajax请求结算时，执行以下操作：

var template = Polymer.dom(this).querySelector('template[tile]');
this.templatize(template);
ajax.data.forEach(function(item){
    var instance = this.stamp(item);
    Polymer.dom(this.$.grid).appendChild(instance.root);
});

这将创建你模板的几个实例，不需要dom-repeat。

聚合物开槽内容和数据绑定

1 个答案: