Polymer 聚合物铁清单动态添加项目?
我正在尝试将一些代码从Polymer 0.5迁移到1.x,这意味着从core list迁移到iron list。然而,我想不出一个铁等同于我是如何添加项目到核心列表的Polymer 聚合物铁清单动态添加项目?,polymer,Polymer,我正在尝试将一些代码从Polymer 0.5迁移到1.x,这意味着从core list迁移到iron list。然而,我想不出一个铁等同于我是如何添加项目到核心列表的 <core-list height="85"> <template> <div class="{{ {selected: selected} | tokenList }}" style="padding:5px;"><paper-fab mini icon="arrow-forward"
<core-list height="85">
<template>
<div class="{{ {selected: selected} | tokenList }}" style="padding:5px;"><paper-fab mini icon="arrow-forward" title="arrow-forward"></paper-fab> <!--{{index}}-->{{model.name}}</div>
</template>
</core-list>
有人有什么建议吗
更新:2015年7月23日太平洋标准时间下午12:20 @齐克斯 根据张贴的建议,我有以下几点
<dom-module id="my-element">
<template>
<iron-list items="[[myItems]]" as="item">
<template>
<div>[[item.name]]</div>
</template>
</iron-list>
</template>
<script>
Polymer({
is:'my-element',
properties: {
myItems: Array
},
addItem: function(item) {
this.push('myItems', {name: item});
}
});
</script>
</dom-module>
[[项目名称]]
聚合物({
是:'我的元素',
特性:{
myItems:数组
},
附加项:功能(项目){
this.push('myItems',{name:item});
}
});
如果设置正确,我将如何从其他地方调用addItem方法
更新:2015年7月23日太平洋标准时间下午1:58 @齐克斯 以下是我目前的代码。虽然我可以操作数组,但在ready或addItem方法中添加到数组中的值不会显示
<dom-module id="fnord-element">
<template>
<iron-list items="[[myItems]]" as="item">
<template>
<div class="item">[[item.name]]</div>
</template>
</iron-list>
</template>
<script>
Polymer({
is:'fnord-element',
properties: {
myItems: {
type: Array,
notify: true
}
},
addItem: function(item) {
//this.push("myItems", {"name":item});
this.myItems=[{name:item}];
alert(this.myItems[0].name);
//alert(item);
},
ready: function() {
//alert('fnord');
this.myItems=[{name:"One"},{name:"Two"}];
}
});
</script>
</dom-module>
<fnord-element id="fnord"></fnord-element>
<paper-button raised onclick="document.querySelector('#fnord').addItem('John Doe');">Test</paper-button>
[[项目名称]]
聚合物({
is:'fnord-element',
特性:{
我的项目:{
类型:数组,
通知:正确
}
},
附加项:功能(项目){
//this.push(“myItems”,“name”:item});
this.myItems=[{name:item}];
警报(此.myItems[0].name);
//警报(项目);
},
就绪:函数(){
//警报(“fnord”);
this.myItems=[{name:“One”},{name:“Two”}];
}
});
试验
iron list
使用items
属性生成其项,类似于dom repeat
。您只需将其绑定到组件中的数组,如下所示:
<dom-module id="my-element>
<template>
<iron-list items="[[myItems]]">
<template>
<div>[[item]]</div>
</template>
</iron-list>
</template>
<script>
Polymer({
is:'my-element',
properties: {
myItems: Array
}
});
</script>
</dom-module>
谢谢您的帮助,如果您愿意的话,请查看我的问题更新,我对Polymer还不太了解。这是一个相当独立的问题,因为它没有直接解决铁名单
的使用问题。简单的回答是,聚合方法变成了HtmleElement方法,因此您可以在聚合环境之外执行document.querySelector('my-element').addItem(…)
。我理解,请原谅我的困惑。我假设querySelector
不再是首选方法,因为它似乎不适合我document.querySelector(“我的元素”)
返回null并且document.querySelector(“我的元素”)。addItem(“test”)
表示它找不到方法addItem。所以我很明显遗漏了一些东西…看起来我们有一些交叉线。您能否发布一个更完整的示例,说明您如何使用组件,以及您希望如何向其添加项目?如果代码不起作用也没关系,只是为了展示你希望它最终如何工作。我想出来了。。。由于缺少浓缩咖啡,我声明了dom模块,但实际上并没有在任何地方使用它。
<dom-module id="my-element>
<template>
<iron-list items="[[myItems]]">
<template>
<div>[[item]]</div>
</template>
</iron-list>
</template>
<script>
Polymer({
is:'my-element',
properties: {
myItems: Array
}
});
</script>
</dom-module>