2014-06-09 8 views
5

Nel codice seguente, voglio usare una funzione come un attributo condizione:Posso usare una funzione come un attributo condizionale

<polymer-element name="test-element"> 
    <template> 
     <select id="type_menu" on-change="{{ onSelected }}"> 
      <option value="0" disabled?="{{ isDisabled }}">Item 0</option> 
      <option value="0" disabled?="{{ isDisabled }}">Item 1</option> 
      <option value="0" disabled?="{{ isDisabled }}">Item 2</option> 
     </select> 
    </template> 
    <script> 
     Polymer('test-element', { 
      onSelected: function(event, details, sender) { 
       // do something here 
      }, 
      isDisabled: function() { 
       return false; // simplified here - it doesn't matter, it always returns true 
      } 
     } 
    </script> 
</polymer-element> 

Finora, non sono stato in grado di fare questo lavoro. Ho provato a usare disabilitato? = "{{IsDisabled()}}" anche. Può essere fatto a tutti? In caso contrario, qual è il modo migliore per farlo con qualche tipo di funzione? L'impostazione di una proprietà dati su pronto potrebbe funzionare ma sembra un po 'ingombrante.

+0

Risolto. Usa un filtro. –

+1

Puoi pubblicare la tua soluzione come risposta con un esempio, in modo che altri che hanno questo problema abbiano qualcosa su cui costruire? –

risposta

4

Ecco un esempio di come ho risolto:

<polymer-element name="test-element"> 
<template> 
    <select id="type_menu" on-change="{{ onSelected }}"> 
     <option value="0" disabled?="{{ someData[0].val | isDisabled }}">Item 0</option> 
     <option value="1" disabled?="{{ someData[1].val | isDisabled }}">Item 1</option> 
     <option value="2" disabled?="{{ someData[2].val | isDisabled }}">Item 2</option> 
    </select> 
</template> 
<script> 
    Polymer('test-element', { 
     ready: function() { 
      // in this case, I'm just using read to put in some simple values to filter 
      this.someData = [{ 
        val = 0 
       },{ 
        val = 1 
       },{ 
        val = 2 
      }]; 
     }, 
     onSelected: function(event, details, sender) { 
      // do something here 
     }, 
     isDisabled: function(val) { 
      return val < 2; 
     } 
    } 
</script> 
</polymer-element> 

Questo è un esempio molto semplice, ma il succo è questo:?

L'attributo condizionale vincolante (disabilitato = {{}}) si aspetta un valore ({{valore}}) o un valore e un filtro separati da una pipe ({{valore | filtro}}). Se gli dai una funzione come valore, credo che valuti direttamente la veridicità della funzione (non la esegue) - cioè someFunctionName == true in opposizione a someFunctionName() == true. In questo contesto, someFunctionName sarà sempre vero perché sta valutando l'esistenza della funzione (non indefinita o non nullo, ecc.) In contrasto con un valore che la funzione potrebbe restituire.

Nella correzione, sto usando un filtro, che viene valutato come funzione di ritorno (e viene passato il valore). Se, nella correzione mostrata qui, dovessi includere solo il valore, la prima opzione sarebbe disabilitata e gli altri sarebbero abilitati (perché 0 è falso). Se lo passo il filtro, però, la funzione può valutare il valore in base al suo algoritmo.

Questo diventa davvero utile quando si utilizza un modello interno con un ciclo per compilare un elenco basato su dati e si desidera impostare disattivato, selezionato, (qualsiasi cosa) in modo dinamico.

Problemi correlati