通过'dom-repeat'和数据绑定的方式更新'paper-listbox'内部的"纸件"失败



注意:这个问题是关于旧版本的聚合物。谷歌的工程师们努力对聚合物包进行突破性的更新,再加上当时他们没有对其穷追不舍,这意味着这个问题已经过时了。

ready函数中绑定到变量journal_tags的初始数据有效,我可以显示"会议"、"付款"one_answers"general_message"三个选项。当我试图通过更改"new_tag"变量来引入一个新选项时,问题就出现了new_tag’通过不同聚合物元素中的数据绑定而改变。

当监视"new_tag"更改的观察者函数"add_new_tag"被调用时,这些是控制台日志:

0meeting
1payment
2general_message
3tada

因此,"日记标记"发生了更改。但问题是,"纸质列表框"中的"纸质项目"选项仍然是最初的"会议"、"付款"、"general_message",尽管我希望对"日记标签"进行更改以添加"tada"选项。

这是代码:

<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-突变。因此,修复很简单,可以通过更改线路来完成:

this.journal_tags.push({tag:this.new_tag});

this.push('journal_tags',{tag:this.new_tag});

最新更新