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