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

我正在开发一个使用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

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

解决方法

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

原文地址：https://www.jb51.cc/html/228182.html