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

Question

注意：这个问题是关于旧版本的聚合物。 Google 工程师们致力于对 polymer 包进行快速的突破性更新，再加上当时他们还没有进行 dogfooding，这意味着这个问题已经过时了。

初始数据绑定到就绪函数中的变量 journal_tags 有效，我得到三个选项 'meeting'、'payment' 和 'general_message' 显示。当我尝试通过更改 'new_tag' 变量来引入新选项时，问题就出现了。 'new_tag' 由不同聚合物元素中的数据绑定更改。

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

0meeting
1payment
2general_message
3tada

因此'journal-tags'被改变了。但问题是 'paper-listbox' 中的 'paper-item' 选项保持相同的初始 'meeting'、'payment'、'general_message'，即使我期望更改为 [=31] =] 添加 '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

我刚刚发现更改数组应该通过特殊的聚合物函数来实现，这些函数可以发送通知，从而使数据绑定起作用，根据 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-listbox' 内的 'paper-item' 并且数据绑定失败

Updating 'paper-item's inside 'paper-listbox' by way of 'dom-repeat' and data binding fails

html

javascript

polymer

polymer-starter-kit