2016-03-22 7 views
1

Ich habe ein Host-Element Bindungs-Array von Objekt zu Kind-Element, das eine paper-input hat, um seine Eigenschaften zu bearbeiten. Ich sehe die Wertänderung bei der Eingabe nicht, die im div Hostelement reflektiert wird. Obwohl beim Debuggen kann ich sehen, dass das Host-Objekt die letzte bearbeitete name hat. Was muss ich tun, um dies automatisch zu verkabeln?Polymer dom-repeat Sub-Eigenschaft ändert Kind zu Host-Verdrahtung

<!-- Host element --> 
<dom-module id="host-item"> 
    <template> 
      <div> 
      <div>[[selectedEmployee.name]]</div> 
       <template is="dom-repeat" items="[[employees]]" as="employee"> 
        <item-edit item="[[employee]]"></item-edit> 
       </template> 
      </div> 
    </template> 
    <script> 
    Polymer({ 
       is: 'host-item', 
       properties: {     
        selectedEmployee: { 
         type: Object 
        }, 
        employees: { 
         type: Array, 
         value = [ { name: 'Name 1'}, { name: 'Name 2'}, { name: 'Name 2'}] 
        } 
       }, 
       ready: function() { 
        this.selectedEmployee = this.employees[0]; 
       } 
      }); 
    </script> 
</dom-module> 

<!-- Child element --> 
<dom-module id="item-edit"> 
    <template> 
      <paper-input id="input" value="{{item.name}}" error-message="Invalid name!"></paper-input>    
    </template> 
    <script> 
    Polymer({ 
       is: 'item-edit', 
       properties: {     
        item: { 
         type: Object 
        } 
       } 
      }); 
    </script> 
</dom-module> 

Antwort

0

Verwenden {{employee}} für 2 way binding. [[...]] ist nur für eine Art und Weise. Verwenden Sie notify: true für die Definition der Eigenschaft.

Untergeordnetes Element sollte vor dem übergeordneten Element definiert werden.

Hier ist das Arbeitsbeispiel Plunk und ähnliche Plunk

<item-edit item="{{employee}}"></item-edit> 
... 
employee: { 
       type: Object, 
       notify: true, 
       value: function() { return {name: 'Test' }; } 
      } 

Update:

Now "Mitarbeiter" Daten in Form einer Anordnung von Objekten. diese Frage prüfen Sie für die Arbeit mit Arrays: Polymer, issue with binding array to paper slider value

Plunk

Docs: Binding to array items

+0

Bitte beachten Sie Änderungen auf meine Frage, vergaß ich dom-Wiederholung zu erwähnen. item-edit befindet sich innerhalb einer dom-repeat. – anivas

+0

Überprüfen Sie das Update in meiner Antwort. –

+0

Kann nicht aus dem Slider Plunk, wo die eigentliche Lösung ist. – anivas

Verwandte Themen