Polymer:如何循环并将HTML呈现给屏幕
发布时间:2020-12-14 23:41:29 所属栏目:资源 来源:网络整理
导读:我正在开发一个使用json从数据库中提取第三方信息的小部件.收集信息后,我计划循环查看信息并创建所需的 HTML代码,并通过{{variable}}将其插入到模板中 现在我得到了意想不到的结果.当我这样做时,html显示为文本. 以下是该问题的一些sudo代码: polymer-eleme
我正在开发一个使用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 任何人都可以推荐如何输出列表到模板? 解决方法
/* 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |