Polymer Eisen-Liste Artikel in der Liste hinzufügen und wählen Sie den neu hinzugefügten Artikel

Question

Ich habe eine Liste der Elemente mit Eisen-Liste aufgeführt. Die Artikel in der Eisenliste sind erweiterbar, für jeden Artikel gibt es eine Ausgabeform.

Es besteht auch die Möglichkeit, einen neuen Eintrag zu erstellen, indem Sie auf eine allgemeine Schaltfläche "Hinzufügen" klicken. Dann wird ein neues Element mit der Methode this.push ('items', newItem) zur Liste hinzugefügt.

Der Druck des neuen Artikels funktioniert gut, die Liste wird aktualisiert.

Ich möchte, dass nach dem Drücken eines neuen Elements das Formular entsprechend dem Element sofort erweitert werden. Wenn der Benutzer also ein neues Objekt erstellen möchte, wird das Erstellungsformular sofort angezeigt.

Um das Formular für ein Element zu erweitern, greife ich einfach den Index der Eisen-Liste aus dem DOM (Element 0 Index 0, Element 1, Index 1 ...), dann füge ich eine CSS-Klasse, die wird es ausweiten.

Das Problem, das ich habe, ist, dass zwischen dem Drücken des Elements und dem Aufruf der Methode, die das Element erweitern wird, das DOM noch nicht gerendert wird, so dass es keinen Index in der Eisenliste entsprechend neu gibt erstellter Artikel

Gibt es einen Teil des Lebenszyklus des Elements, den ich verpasst habe? Nach der Forschung habe ich keine Methoden gefunden, um das Rendern der Eisenliste oder der Aktualisierung zu erzwingen ... Könnte mir jemand eine Idee geben, wie man das Formular sofort ausfüllt, nachdem ich das Objekt in das Array geschoben habe?

Answer 1

Dieser Code wird immer dann erweitert, wenn die erweiterte Variable der ID entspricht, eindeutige IDs erfordert, Name oder was auch immer sein kann (ich würde empfehlen, die Datenbank zu verwenden). Erweitert das Objekt automatisch, indem expanded gleich der ID des zuletzt erstellten Objekts gesetzt wird.

<dom-module id="my-list"> 
    <template> 
    <iron-list items="{{myItems}}"> 
     <my-item 
      on-tap="select" 
      expaned="[[areEqual(item.id, expanded]]"> 
      [[item.name]] 
     </my-item> 
    </iron-list> 
     .... add stuff .... 
    </template> 
</dom-module> 
<script> 
    (function() { 
    Polymer({ 
     is: 'my-list', 

     properties: { 
      expanded: { 
      type: string, 
      value: "" 
      } 
     }, 
     onAdd: function(adding){ 
     ... adding code... 
     this.expanded = this.adding.id; 
     }, 

     areEqual: function(a, b){ 
     return a === b; 
     }, 

     select: function(e){ 
     this.expanded = e.model.id; 
     } 
     }) 
    }()) 
</scipt>