Perché le proprietà calcolate di Polymer richiedono argomenti di proprietà espliciti?

Question

Stavo scavando un po 'negli elementi di Polymer 1.0 e sono un po' curioso riguardo le proprietà calcolate.

Ad esempio, in carta cassetto panel.html,

<dom-module id="paper-drawer-panel" …> 
    … 
    <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]"> 
    … 
    </div> 
    … 
</dom-module> 
<script> 
Polymer({ 
    is: 'paper-drawer-panel', 
    … 
    _computeDrawerStyle: function(drawerWidth) { 
    return 'width:' + drawerWidth + ';'; 
    }, 
    … 
</script> 

drawerWidth è una struttura di paper-drawer-panel, perché è così importante includere esplicitamente nei parametri della proprietà calcolata?

È

[[_computeDrawerStyle()]] 

… 

_computeDrawerStyle: function() { 
    return 'width:' + this.drawerWidth + ';'; 
} 

È questa cattiva pratica?

Answer 1

Gli argomenti espliciti nei collegamenti calcolati hanno uno scopo importante: comunicare a Polymer di quali proprietà dipende l'associazione calcolata. Ciò consente a Polymer di sapere quando ricalcolare e aggiornare l'associazione calcolata.

Prendere [[_computeDrawerStyle()]], ad esempio. In questo caso, Polymer non ha idea di quali siano le altre proprietà da cui dipende l'associazione calcolata e la calcola solo una volta sul carico.

Non appena si aggiungono drawerWidth esplicitamente ([[_computeDrawerStyle(drawerWidth)]]) Polimero ora sa che deve eseguire nuovamente il legame calcolato per un nuovo valore ogni volta drawerWidth modifiche.

Answer 2

Penso che tu sia confuso. A cosa ti riferisci nell'esempio di codice qui style$="[[_computeDrawerStyle(drawerWidth)]]" è una chiamata a una funzione privata chiamata _computeDrawerStyle e ovviamente devi dargli esplicitamente i parametri corretti. Consultare la documentazione here per informazioni sulle proprietà calcolate.

Answer 3

Il polimero ha due concetti separati e li stai confondendo.

1. Proprietà calcolate. Si tratta di proprietà che dipendono da altre e vengono ricalcolate ogni volta che i componenti vengono modificati. È quindi possibile creare il database del valore di tale proprietà calcolata come valore della proprietà. <paper-draw-panel> NON ha una proprietà calcolata (ho controllato il codice).

2. Le chiamate di funzione fanno riferimento nel databinding (che è ciò che _computeDrawStyle) è. Ciò fa in modo che Polymer richiami quella funzione (dell'elemento) quando uno qualsiasi dei suoi parametri viene modificato. I parametri sono tutte proprietà (oppure puoi usare sottoproprietà di oggetti e indici di array) Questo è ciò che sta accadendo qui.