获取演示数据为核心列表

聚合物网站给出了这样的例子使用的核心名单：获取演示数据为核心列表

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

但无处解释怎么会得到使用HTML/JS一些简单的测试数据到这个列表。所有这些例子都会创建一个自定义元素，但我仍然试图让我的头部围绕框架，并希望将一些简单的数据放入列表中！

任何人都可以向我解释如何做到这一点？

来源

2014-09-02 Grokys

根据你如何使用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}]">

来源

2014-09-02 22:43:50

下面是如何使用聚合物进行基本的静态数据绑定。

还你必须定义的元素的高度，否则什么都不会显示。

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>

来源

2014-11-20 21:47:09

谢谢！有必要指出，核心清单并没有带来它自己的高度。您**必须**设定维克多提到的高度。 – 2014-12-01 12:34:28

获取演示数据为核心列表

回答

相关问题