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>

您可以在这里看到一个JSBin示例：

---

有人能推荐如何将列表输出到模板吗？

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

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

{{i}，{{customer.name}

可能有点晚了。。。 如果你想坚持你的方法，你可以使用

this.injectBoundHTML

：

 <polymer-element name="loop-element">
            <template>
                  <div id='customerList'> </div> 
            </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]);
                      this.injectBoundHTML( this.customerList, 
                         this.$.customerList);
                   }

                });

            </script>
        </polymer-element>

聚合物（“环元素”{
就绪：函数（）{
this.loadCustomerList（）；
}
客户列表：“正在加载客户列表…”，
loadCustomerList:函数（）{
CustomerNameArray[]=//从jSon文件获取数组
i=0；
做{
this.customerList=“”+customerNameArray[i]+”；
}而（客户协议[i]）；
this.injectBoundHTML（this.customerList，
这是$.customerList）；
}
});

然而，第一种方法更好

聚合物v.1.0

/*到polymer.html的相对路径*/
/*元素的CSS规则*/
员工名单：
名字：{{item.First}
姓氏：{{item.Last}
聚合物({
是‘员工名单’，
就绪：函数（）{
这是我的雇员=[
{第一个：'鲍勃'，最后一个：'史密斯'}，
{第一个：“萨利”，最后一个：“约翰逊”}
];
}
});

---

在Polymer 3.0中，您可以执行以下操作：

<dom-repeat items="{{customers}}">
  <template>
    {{item.name}}
  </template>
</dom-repeat>

{{item.name}

---

任何列表都绑定到

dom repeat

的

items

属性，模板中的

item

用于表示列表中的对象。您可以在Polymer 3.0 API参考页上阅读更多有关dom repeat的信息。

您不能将HTML直接绑定到dom。作为安全防范措施，它总是逃脱。如果您今天需要执行此操作，则必须强制执行“this.innerHTML=someHtml；”谢谢你，埃里克，这很有效。我认为这场斗争的很大一部分是理解聚合物开发中使用的术语，以及如何寻找正确的参考资料。词汇表不是一个坏主意。还有什么事情能让你的生活更轻松？我想知道，这样我们可以改进文档。请随意记下一个问题：好吧，如果聚合物出现在CodeCademy.com上，那将是一个很好的开始。这种教学方法很简单，效果很好。毫无疑问，一个术语表会很棒，有一半的时候我不知道怎么称呼{{{thingy}}或者指出“指令部分”，或者理解事物加载的顺序。。。到目前为止，这是反复试验（但很有趣）。我仍然不知道如何使用Polymer-Project.com网站：）我通常在谷歌上搜索：“term+Polymer Project”，希望它能在网站上找到正确的页面。但我真正喜欢的是一个从简单到复杂的教程列表。repeat=“{{key，value in dictionary}}”似乎只在元素中起作用。

 <polymer-element name="loop-element">
            <template>
                  <div id='customerList'> </div> 
            </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]);
                      this.injectBoundHTML( this.customerList, 
                         this.$.customerList);
                   }

                });

            </script>
        </polymer-element>

/* 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>

<dom-repeat items="{{customers}}">
  <template>
    {{item.name}}
  </template>
</dom-repeat>