javascript - 通过 'paper-item' 更新 'paper-listbox' 内的 'dom-repeat'，数据绑定(bind)失败

Question

注意:这个问题是关于旧版本的 polymer 。 Google 工程师致力于对 Polymer 包进行快速突破性更新，再加上当时他们并未进行 dogfooding，这意味着该问题已过时。

绑定(bind)到 ready 函数中变量 journal_tags 的初始数据有效，我得到了三个选项“ session ”、“付款”和“general_message”。当我尝试通过更改“new_tag”变量来引入新选项时，问题就出现了。 'new_tag' 由不同 polymer 元素中的数据绑定(bind)更改。

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

0meeting
1payment
2general_message
3tada

因此'journal-tags'被改变了。但问题是“paper-listbox”中的“paper-item”选项保持不变的初始“meeting”、“payment”、“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>

Answer 1

我刚刚发现更改数组应该通过特殊的聚合函数来实现，这些函数可以发送通知，从而使数据绑定(bind)起作用，根据 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});