attributo Nascosto in Polymer 1.0

Question

Non ho usato Polymer dal momento che il 0,4-0,5 dell'epoca e sono abituato ad usare l'attributo nascosto in questo modo <my-element hidden="{{foo != bar}}"></my-element>

Ora in Polymer 1.0 vedo che è necessario utilizzare i valori calcolati da un metodo per tutto ciò che non è un valore booleano. Io ho il mio codice come questo:

<my-element hidden="{{_computeHidden()}}"></my-element>

E poi nella sezione script:

Polymer({ 
    is: 'super-element', 
    properties: {...}, 
    _computeHidden: function(){ 
     console.log('its being called, mkay'); 
     return !(foo == bar); 
    } 
}); 

Ora nella console il messaggio viene in su due volte dopo la pagina di aggiornamento, ma quando il valore di foo modifiche , l'elemento non scompare. Che cosa sto facendo di sbagliato?

Answer 1

Se si desidera attivare il ricalcolo della funzione quando si modifica foo, è necessario assicurarsi che foo sia proprietà e passarlo nella funzione come argomento. Ecco un piccolo esempio.

<dom-module id="register-me"> 
    <template> 
     <div hidden$="{{compute(ishidden)}}">Hello from my local DOM</div> 
     <button on-click="toggle">Toggle Hidden</button> 
    </template> 
    <script> 
     Polymer({is: "register-me", 
      properties: { ishidden: { 
       type: Boolean, 
       value: false 
      } }, 
      compute: function() { 
       console.log("computing..."); 
       return this.ishidden; 
      }, 
      toggle: function() { 
       this.ishidden = !this.ishidden; 
      } 
     }); 
    </script> 
</dom-module> 

Si noti che per l'associazione a attributi, è necessario utilizzare $=.

Answer 2

Quindi, ci sono due problemi. Come nota Maria, devi avere il tuo metodo _computeHidden associato a parametri che risponderanno alle notifiche Polimero. Pertanto, sia foo sia bar devono essere dichiarati come proprietà sull'elemento.

Un altro problema è che "nascosto" è un boolean attribute, il che significa che la sua stessa presenza indica che l'elemento deve essere nascosto. In Polymer 1.0, utilizzando $ nelle modifiche hidden$= nascoste in un legame di proprietà e gestirà le stringhe. Senza $, hidden= valuterà solo booleano non elaborato. hidden non è nell'elenco $ in attributi html nativi, quindi la scelta spetta a te.

Polymer({ 
    is: 'my-element', 
    properties: { 
     foo: Boolean, 
     bar: Boolean 
    }, 
    _computeHidden: function(){ 
     return !(this.foo == this.bar); 
    } 
}); 

<my-element hidden$="{{_computeHidden(foo, bar)}}"></my-element> 

Con questa annotated attribute binding, "nascosto" apparirà sul elemento solo se il valore calcolato è truthy, che è il comportamento che si desidera. Con un semplice collegamento "=", "nascosto" apparirà anche se la tua funzione restituisce true, o null, o qualsiasi altro valore.