[英]How to dynamically populate iron-list elements
So I have an iron-list element for a user's data history. 所以我有一个用户数据历史的铁列表元素。 The iron-list is not part of a custom element.
铁列表不是自定义元素的一部分。 It is simply on the page.
它只是在页面上。 I want to populate once the user has successfully logged in. Perhaps it is just my inexperience with polymer, but there doesn't seem to be a straightforward way to do this.
一旦用户成功登录,我想填充。也许这只是我对聚合物的经验不足,但似乎没有一种直接的方法来做到这一点。 First attempt (simplified for reading, eg I don't actually use jquery, there's lots of error-handling code I'm omitting, etc):
第一次尝试(简化了阅读,例如我实际上并没有使用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>
I would swear this worked in an earlier version of Polymer. 我发誓这在早期版本的Polymer中有效。 But it doesn't seem to work now, which is fine, but I need an alternative.
但它现在似乎不起作用,这很好,但我需要一个替代方案。
Some alternatives I've considered: 我考虑过的一些替代方案:
Have iron-ajax element in same DOM scope and set ' the URL once the user is logged in to trigger the xhr request. 在相同的DOM范围内使用iron-ajax元素,并在用户登录后设置'URL以触发xhr请求。 I'm not sure whether or not that'd work.
我不确定这是否有用。
Wrap the list in a custom element and use an iron-meta-query per chrisW's answer. 将列表包装在自定义元素中,并根据chrisW的答案使用iron-meta-query。
Those options are terrible . 那些选择很糟糕 。 I cannot believe there is no simpler way to accomplish this feat.
我无法相信没有更简单的方法来完成这一壮举。 How do I conditionally fetch data based on user input and dynamically add an iron-list to the page (or update one that's already there)?
如何根据用户输入有条件地获取数据并动态地向页面添加铁列表(或更新已存在的页面)? Is there really no API for this use case?
这个用例真的没有API吗?
Thank you for your answers. 谢谢您的回答。 Turns out that my original code actually works fine: it was actually a build process issue.
事实证明我的原始代码实际上工作正常:它实际上是一个构建过程问题。 For some reason iron-list did not get installed when I installed the project dependencies through bower.
出于某种原因,当我通过bower安装项目依赖项时,没有安装iron-list。 I took out the vulcanized import (which must not have contained a ref to iron-list either) and imported all the elements directly, then I got the 404 and figured out what had happened.
我拿出硫化导入(也不一定包含炼铁列表的参考)并直接导入所有元素,然后我得到404并找出发生了什么。
I think that for best practices, you should use this.$.historyList
to refeer id on this element. 我认为,对于最佳实践,您应该使用
this.$.historyList
来为此元素提供id。 Anyway, when you get data to populate iron-list
you should use this.set('items', data);
无论如何,当你获得填充
iron-list
数据时,你应该使用this.set('items', data);
An example using your element looks like: 使用您的元素的示例如下所示:
<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>
An example of iron-list 铁列表的一个例子
<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>
This example is using an ajax call that executes automatically and populates the iron-list
without the need to create a customized element. 此示例使用自动执行的ajax调用并填充
iron-list
而无需创建自定义元素。
More about iron-list
on: 更多关于
iron-list
信息:
https://elements.polymer-project.org/elements/iron-list https://elements.polymer-project.org/elements/iron-list
I didn't entirely understand your question. 我并不完全理解你的问题。 Hope this helps.
希望这可以帮助。
<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);
}
}
Side note, when access elements by ids in Polymer elements, make sure you do it this way: 旁注,当通过Polymer元素中的id访问元素时,请确保以这种方式执行:
this.$.elementId
or 要么
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.