Question

聚合物网站提供了使用核心列表的示例：

<core-list data="{{data}}" height="80">
  <template>
    <div class="{{ {selected: selected} | tokenList }}">List row: {{index}}</div>
  </template>
</core-list>

但无处解释我如何使用html / js将一些简单的测试数据放入此列表中。所有的例子都可以创建一个自定义元素，但我仍然试图让我的头脑围绕框架，并希望将一些简单的数据放入列表中！

有人可以向我解释怎么做吗？

Answer 1

根据您使用core-list的方式，此问题的答案不止一个。由于您询问了简单测试数据，我假设您的标记位于主文档（index.html）中，在这种情况下，一种简单的方法就是这样：

<core-list height="80">
  <template>
    <div class="{{ {selected: selected} | tokenList }}">List row: {{index}}</div>
  </template>
</core-list>

<script>
  document.querySelector('core-list').data = [{"index": 0}, {"index": 1}, {"index": 2}];
</script>

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

Fwiw，您应该能够通过将data属性中的JSON提供给core-list，但该元素isn't properly type-hinting将该属性作为对象值来实现。修复该问题后，您可以这样写：

<core-list height="80" data="[{'index': 0}, {'index': 1}]">

Answer 2

以下是使用Polymer进行基本静态数据绑定的方法。

此外，您必须定义core-list元素的高度，否则不会显示任何内容。

http://jsfiddle.net/4kp81x5m/2/

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-list/core-list.html">
    
<my-list-test></my-list-test>
<polymer-element name="my-list-test">
  <template>
    <style>
      .mylist {
        height: 540px;
      }
    </style>
    <core-list data="{{mydata}}" class="mylist" flex>
      <template>
        <div layout horizontal>
          <div>Index {{index}} to name {{model.name}}</div>
        </div>
      </template>
    </core-list>
  </template>
  <script>
    Polymer({
        mydata: [{name: "1"}, {name: "2"}, {name: "3"}, {name: "4"}]
    });
  </script>
</polymer-element>

将演示数据导入核心列表

2 个答案: