通过'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'中,并且数据绑定失败的主要内容,如果未能解决你的问题,请参考以下文章

当Array排序时,Dom-repeat不会重新渲染

C#如何通过OleDb更新Excel中的数据

ubuntu虚拟机通过代理执行软件更新及apt-get的使用

Polymer,IE11 dom-repeat没有渲染选项标签

python更新出错显示no module named 'pip',ensurepip没用?

delphi 7 DBGrid 实现下拉选择后更新