通过'dom-repeat'更新'paper-item'在'paper-listbox'中,并且数据绑定失败
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过'dom-repeat'更新'paper-item'在'paper-listbox'中,并且数据绑定失败相关的知识,希望对你有一定的参考价值。
注意:这个问题与旧版聚合物有关。谷歌的工程师们正在努力对聚合物包装进行快速更新,并且当时他们没有进行食品杂货,这意味着这个问题已经过时了。
在ready函数中绑定到变量journal_tags的初始数据有效,我得到三个选项'meeting','payment'和'general_message'来显示。当我尝试通过更改'new_tag'变量来引入新选项时出现问题。 'new_tag'通过不同聚合物元素中的数据绑定而改变。
当监视对“new_tag”的更改的观察者函数“add_new_tag”被调用时,这些是控制台日志:
0meeting
1payment
2general_message
3tada
因此'journal-tags'被改变了。但问题在于,“纸张列表框”中的“纸张项目”选项保持相同的初始“会议”,“付款”,“general_message”,即使我希望更改“journal-tags”以添加'田田的选择。
这是代码:
<dom-module id="journal-entry">
<template>
<paper-dropdown-menu label="Choose tag">
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="{{journal_tags}}">
<paper-item>
{{item.tag}}
</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<paper-textarea label="journal_entry_text_area">
</paper-textarea>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'journal-entry',
properties:{
new_tag:{
type:String,
notify:true,
observer:'add_new_tag'
},
journal_tags:{
type:Object,
notify:true
}
},
ready : function(){
this.journal_tags=[
{tag:'meeting'},
{tag:'payment'},
{tag:'general_message'}
];
},
add_new_tag : function(){
this.journal_tags.push({tag:this.new_tag});
for(var i=0;i<this.journal_tags.length;i++){
console.log(i + this.journal_tags[i].tag);
}
//this.journal_tags.sort();
}
});
})();
</script>
</dom-module>
我刚刚发现,应该通过特殊的聚合物函数来改变数组,这些聚合函数可以发送通知,使数据绑定功能,如https://www.polymer-project.org/1.0/docs/devguide/properties#array-mutation。因此修复很简单,通过更改行来完成:
this.journal_tags.push({tag:this.new_tag});
至
this.push('journal_tags',{tag:this.new_tag});
以上是关于通过'dom-repeat'更新'paper-item'在'paper-listbox'中,并且数据绑定失败的主要内容,如果未能解决你的问题,请参考以下文章
ubuntu虚拟机通过代理执行软件更新及apt-get的使用
Polymer,IE11 dom-repeat没有渲染选项标签