2016-04-22 6 views
2

Ich habe eine dom-repeat Vorlage, die Tabellenzeilen generiert, wobei eine der Zeilenzellen eine Schaltfläche enthält, die ich deaktiviert werden soll, wenn der Wert der Zeile einen bestimmten Wert hat. Also meine Komponente diesen Code hat, der eine berechnete Bindung verwendet den Wert der disabled Eigenschaft der Schaltfläche zu setzen:Polymer berechnete Bindung wird nicht auf Update

<template is="dom-repeat" items="{{list}}" as="ticket"> 
    <tr class$="{{ticket.status}}"> 
     <td class="actions"> 
      <paper-icon-button icon="add" on-tap="incTickets" 
       disabled="{{noAvailableTickets(ticket)}}"> 
      </paper-icon-button> 
     </td> 
     <td>[[ticket.amount]]</td> 
     <td>[[ticket.event.title]]</td> 
    </tr> 
</template> 

Und in meinem Code habe ich diese Methode:

noAvailableTickets : function(ticket) { 
    return ticket.event.available_tickets <= 0; 
} 

Ich kann sehen, dass die Die Methode zum Berechnen der Bindung wird beim Erstellen der Liste einmal für jedes Element aufgerufen.

Dann, wenn ich Artikel aktualisieren, wie folgt aus:

this.set('list.' + ind + '.amount', newamount); 

Die berechnete Bindung ist nicht recalcuated, und das Verfahren wird nicht noch einmal aufgerufen, obwohl ich der Wert tatsächlich in der in der ticket.amount Anzeige ändern sehen Vorlage.

Die Polymer Data Binding entry in the developer's guide hat dies etwa berechnet Bindungen zu sagen:

die [...] Eigenschaft wird auf den Rückgabewert von computeFullName gebunden, die bei jedem ersten oder letzten Änderungen neu berechnet wird. [first und last sind die angegebenen Argumente für computeFullName]

So unter der Annahme, dass die Bindung berechnet ist nicht bekannt, die Korrelation zwischen dem Objektwert, seine amount Eigenschaft und wie andere Logik verwendet diese die available_tickets Eigenschaft zu aktualisieren ich habe versucht, einen notifyPath Befehl mit dem vollständigen aktualisierten Objekt, wie dies hinzuzufügen:

this.notifyPath('list.' + displayId, ticket); 

Aber das hat keine Wirkung zu haben scheint. Was vermisse ich?

+0

Ich weiß, dass dies bereits beantwortet wurde, aber haben Sie erwogen, 'this.push ('path', value)' 'anstelle von' this.set' zu verwenden? – Alan

+0

'push' fügt dem Array hinzu, aber ich möchte kein weiteres Element hinzufügen, sondern nur das vorhandene aktualisieren. – Guss

Antwort

2

Ich vermute notifyPath löst kein Update in Ihrem Fall wegen its dirty check. Das heißt, list[0] und ticket beziehen sich auf dieselbe Instanz (trotz der Tatsache, dass sich die Eigenschaft der Instanz geändert hat), also wird sie nicht als "schmutzig" betrachtet.

Mein Experiment jsbin zeigt, dass die Einstellung list[0] auf einen modifizierten Klon tatsächlich ein Update auslöst.

attached: function() { 
    setTimeout(function() { 
    var copy = this.list[0].clone(); 
    copy.amount = 'FREE'; 
    this.set('list.0', copy); 
    }.bind(this), 1000); 
} 

Aber das ist wahrscheinlich nicht der beste Weg, dies zu erreichen.

Polymer nach docs, die berechnete auszulösen Bindung, wenn sich ein ticket subproperty Änderungen, Sie ticket.* in Ihrer Bindung verwenden würde:

<paper-icon-button disabled="{{noAvailableTickets(ticket.*)}}"> 
Polymer({ 
    ... 
    noAvailableTickets: function(change) { 
    var ticket = change.base; 
    return ticket.event.available_tickets <= 0; 
    } 
}); 

Hier ist ein jsbin.

Verwandte Themen