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

Polymer 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