Aktualisierung der 'Papier-Item-Inside'-Papier-Listbox' über 'Dom-Repeat' und Datenbindung schlägt fehl

Question

Hinweis: Diese Frage bezieht sich auf eine alte Version von Polymer. Die Ingenieure von Google setzen sich dafür ein, dass die Polymerverpackung schnell gebrochen wird und dass sie zu der Zeit, als sie noch kein Hundefutter waren, ein obsoletes Problem darstellen.

Die anfängliche Datenbindung an variable journal_tags in der ready-Funktion funktioniert und ich bekomme die drei Optionen 'meeting', 'payment' und 'general_message' angezeigt. Das Problem tritt auf, wenn ich versuche, eine neue Option einzuführen, indem ich die Variable 'new_tag' verändere. 'new_tag' wird durch Datenbindung in einem anderen Polymerelement geändert.

Wenn die ‚add_new_tag‘ Beobachter-Funktion, die Änderungen an ‚new_tag‘ überwacht wird, das sind die Konsolenprotokolle genannt:

0meeting 
1payment 
2general_message 
3tada 

Deshalb ‚Journal-Tags‘ geändert wird. Aber das Problem ist, dass die "Papier-Artikel" -Optionen in der "Papier-Listbox" die gleichen anfänglichen "Treffen", "Zahlung", "allgemeine_Nachricht" bleiben, obwohl ich erwartet habe, dass Änderungen an "journal-tags" den "hinzufügen" Tada 'Option.

Dies ist der Code:

<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

ich, dass das Ändern Arrays gerade herausgefunden, sollte durch spezielle Polymer-Funktionen vorgenommen werden, die Benachrichtigungen ermöglichen gesendet werden, die Datenbindung an Funktion zu aktivieren, wie pro https://www.polymer-project.org/1.0/docs/devguide/properties#array-mutation. Deshalb ist die Lösung ist einfach und wird durch Änderung der Linie gemacht:

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

zu

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