[英]How to dynamically populate iron-list elements
所以我有一个用户数据历史的铁列表元素。 铁列表不是自定义元素的一部分。 它只是在页面上。 一旦用户成功登录,我想填充。也许这只是我对聚合物的经验不足,但似乎没有一种直接的方法来做到这一点。 第一次尝试(简化了阅读,例如我实际上并没有使用jquery,有很多错误处理代码,我省略了等):
<iron-list as="item" style='height: 100%;' id='history-list'>
<template>
<div style='min-height: 140px;'>
<ul>
<!-- various fields for each record as list items -->
</ul>
</div>
</template>
</iron-list>
<script>
//once user is logged in
var items = $.getJSON('userhistoryscript');
//setAttribute doesn't work either
document.getElementById('history-list').items = items;
</script>
我发誓这在早期版本的Polymer中有效。 但它现在似乎不起作用,这很好,但我需要一个替代方案。
我考虑过的一些替代方案:
在相同的DOM范围内使用iron-ajax元素,并在用户登录后设置'URL以触发xhr请求。 我不确定这是否有用。
将列表包装在自定义元素中,并根据chrisW的答案使用iron-meta-query。
那些选择很糟糕 。 我无法相信没有更简单的方法来完成这一壮举。 如何根据用户输入有条件地获取数据并动态地向页面添加铁列表(或更新已存在的页面)? 这个用例真的没有API吗?
谢谢您的回答。 事实证明我的原始代码实际上工作正常:它实际上是一个构建过程问题。 出于某种原因,当我通过bower安装项目依赖项时,没有安装iron-list。 我拿出硫化导入(也不一定包含炼铁列表的参考)并直接导入所有元素,然后我得到404并找出发生了什么。
我认为,对于最佳实践,您应该使用this.$.historyList
来为此元素提供id。 无论如何,当你获得填充iron-list
数据时,你应该使用this.set('items', data);
使用您的元素的示例如下所示:
<iron-list>
<template is="dom-repeat" items="{{data}}" as="history">
<!--history.property-->
</template>
</iron-list>
<script>
Polymer({
properties:{
data:{type:Array, value:[],}
},
_functionToSetDataWhenUserIsLoggedIn: function(data){
this.set('data',data);
}
});
</script>
铁列表的一个例子
<template is="dom-bind">
<iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: <span>[[item.name]]</span>
</div>
</template>
</iron-list>
</template>
此示例使用自动执行的ajax调用并填充iron-list
而无需创建自定义元素。
更多关于iron-list
信息:
https://elements.polymer-project.org/elements/iron-list
我并不完全理解你的问题。 希望这可以帮助。
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: <span>[[item.name]]</span>
</div>
</template>
</iron-list>
properties:{
data:{type:Array, value:[],}
},
// the attached function is automatically called
attached: function() {
// Use an iron meta in the element that you keep track in of login information
// or create an onLogin listener
var isLoggedIn = new Polymer.IronMetaQuery({key: 'isLoggedIn'}).value,
if (isLoggedIn) {
var jsonData = $.getJSON('userhistoryscript');
this.set('data',jsonData);
}
}
旁注,当通过Polymer元素中的id访问元素时,请确保以这种方式执行:
this.$.elementId
要么
Polymer.dom('#elementId')
<template is="dom-bind">
<iron-list id="list">
</iron-list>
</template>
<script>
document.addEventListener('onLogin', function(event) {
var list = document.getElementById('#list');
var jsonDataObjects = $.getJSON('userhistoryscript');
for (var i = 0; i < jsonDataObjects.length; i++) {
var div = document.createElement('div');
div.textContent = jsonDataObjects[i].info; // change this line
list.appendChild(div);
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.