通过'dom-repeat'更新'paper-item'在'paper-listbox'中'并且数据绑定失败

时间:2016-05-19 00:00:32

标签: javascript html polymer polymer-starter-kit

注意:这个问题与旧版聚合物有关。谷歌的工程师们正在努力对聚合物包装进行快速更新,并且当时他们没有进行食物营养,这意味着这个问题已经过时了。

在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”以添加' 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>

1 个答案:

答案 0 :(得分:2)

我刚刚发现,应该通过特殊的聚合物函数来改变数组,这些聚合函数可以发送通知,使数据绑定能够按照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});