什么是实现声明集合渲染与聚合物的最佳方法是什么？ [英] What is the best way to implement declarative collection rendering with Polymer?

问题描述

我希望能够使远程采集获取与＆LT;核心AJAX＆GT; 这样：

I would like to be able to render a remote collection fetched with <core-ajax> as such:

<rendered-collection url="/api/items">
  <custom-element value="{{ _it_ }}"></custom-element>
</rendered-collection>

其中，＆LT;呈现收集＆GT; 看起来是这样的：

<link rel="import" href="/core-ajax/core-ajax.html">

<polymer-element name="rendered-collection" attributes="url" noscript>
  <template>
    <core-ajax url="{{ url }}" response="{{ collection }}" auto handleAs="json"></core-ajax>
    <template repeat="{{ _it_ in collection }}">
      <content><!-- cannot be used like that unfortunately --></content>
    </template>
  </template>
</polymer-element>

我知道这并不怎么＆LT;内容＆GT; 应该是工作，我还是要对模型反正注入到它

I realise that this is not how <content> is supposed to work and that I still have to inject the model into it anyway.

我看到答案建议来检索JS内容的节点：

I have seen answers advising to retrieve the content's nodes in JS:

<style>
  ::content > * {
    display: none;
  }
</style>
<content id="content"></content>
...
<script>
  Polymer('rendered-collection', {
    attached: function () {
      this.contentNodes = this.$.content.getDistributedNodes();
      // then...how do I inject models from the collection into the nodes?
    }
  });
</script>

什么是最好的方式去？

What's the best way to go?

推荐答案

如果我正确地理解你的使用情况，您需要＆LT的儿童;呈现收集＆GT; 来描述渲染为集合中的每个项目。这正是＆LT;模板＆GT; 是。所以，如果我们提出的＆LT使用;呈现收集＆GT; 像这样：

If I understand your use case correctly, you want the children of <rendered-collection> to describe the rendering for each item in the collection. This is exactly what <template> is for. So, if we propose usage of <rendered-collection> like so:

<rendered-collection>
  <template>
    <h2>{{name}}</h2>
  </template>
</rendered-collection>

然后我们就可以带着几分模板福使其：

Then we can render it with a bit of template-fu:

<polymer-element name="rendered-collection">
<template>
  <content></content>
</template>
<script>
  Polymer('rendered-collection', {
    collection: [
      {name: 'alpha'},
      {name: 'beta'},
      {name: 'gamma'}
    ],
    ready: function() {
      this.bindTemplate();
    },
    bindTemplate: function() {
      // user-supplied template
      var t = this.querySelector('template');
      // optional, but supplies fancy expression support
      t.bindingDelegate = new PolymerExpressions();
      // repeat over the entire model
      t.setAttribute('repeat', '{{}}');
      // set the model to our collection
      t.model = this.collection;
    }
  });
</script>
</polymer-element>

http://jsbin.com/kedig/1/edit

这篇关于什么是实现声明集合渲染与聚合物的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！