Polymer:如何循环并将HTML呈现给屏幕

Question

我正在使用一个小部件,使用json从数据库中提取第三方信息.收集信息后,我计划遍历信息并创建所需的HTML代码,并通过{{variable}}将其插入到模板中

现在我得到了意想不到的结果.当我这样做时,html显示为文本.

以下是该问题的一些sudo代码:

       <polymer-element name="loop-element">
            <template>
                  {{customerList}}
            </template>
            <script>
                Polymer('loop-element', {
                   ready: function() {
                       this.loadCustomerList();
                   }
                   customerList:"Loading customer list...",

                   loadCustomerList: function() {
                       CustomerNameArray[] = //Get the array from jSon file
                       i = 0;
                       do {
                           this.customerList = "<div>" + customerNameArray[i] + "</div>";
                       } while (customerNameArray[i]);
                   }

                });

            </script>
        </polymer-element>

基本上DIV不会被渲染,而是以文本形式打印到屏幕上:

"<div>Name 1</div>" "<div>Name 2</div>" ... n

代替:

Name 1
Name 2
Name n...

你可以在这里看到一个JSBin示例:http://jsbin.com/tituzibu/1/edit

任何人都可以推荐如何输出列表到模板？

Answer 1

聚合物v.1.0

/* relative path to polymer.html*/
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="employee-list">
    <style>
        /* CSS rules for your element */
    </style>
    <template>
        <div> Employee list: </div>
        <template is="dom-repeat" items="{{employees}}">
            <div>First name: <span>{{item.first}}</span></div>
            <div>Last name: <span>{{item.last}}</span></div>
        </template>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'employee-list',
        ready: function() {
            this.employees = [
                {first: 'Bob', last: 'Smith'},
                {first: 'Sally', last: 'Johnson'}
            ];
        }
    });
</script>

DOC

Answer 2

您应该使用Polymer的基于DOM的数据绑定功能,而不是自己创建标记.

<template repeat="{{customer, i in customers}}">
  <div>{{i}}, {{customer.name}}</div>
</template>

http://www.polymer-project.org/docs/polymer/databinding.html#an-example