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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/228182.html

猜你在找的HTML相关文章