Polimero - Sistema dati

Il polimero consente di osservare i cambiamenti sulle proprietà di un elemento intraprendendo diverse azioni come:

  • Observers - Richiama i callback ogni volta che i dati cambiano.

  • Computed Properties - Calcola le proprietà virtuali in base ad altre proprietà e le ricalcola ogni volta che i dati di input cambiano.

  • Data Bindings - Aggiorna le proprietà, gli attributi o il contenuto di testo di un nodo DOM utilizzando annotazioni ogni volta che i dati cambiano.

Percorsi dati

Pathè una stringa nel sistema dati, che fornisce una proprietà o una sotto-proprietà relativa a un ambito. L'ambito può essere un elemento host. I percorsi possono essere collegati a diversi elementi utilizzando il data binding. La modifica dei dati può essere spostata da un elemento a un altro, se gli elementi sono collegati con il data binding.

Esempio

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

I due percorsi precedenti (my-profile e address-card) possono essere collegati con il data binding, se <address-card> è nel DOM locale dell'elemento <my-profile>.

Di seguito sono riportati i tipi speciali di segmenti di percorso in Polymer.js:

  • Il carattere jolly (*) può essere utilizzato come ultimo segmento in un percorso.

  • Le mutazioni dell'array possono essere visualizzate su un dato array posizionando le giunzioni delle stringhe come ultimo segmento in un percorso.

  • I percorsi degli elementi dell'array indicano un elemento in un array e il segmento del percorso numerico specifica un indice dell'array.

In un percorso dati, ogni segmento di percorso è un nome di proprietà e includono i seguenti due tipi di percorsi:

  • I segmenti del percorso separati da punti. Ad esempio: "apple.grapes.orange".

  • In un array di stringhe, ogni elemento dell'array è un segmento di percorso o un percorso punteggiato. Ad esempio: ["mela", "uva", "arancia"], ["mela.uva", "arancia"].

Flusso di dati

Esempio

L'esempio seguente specifica un'associazione bidirezionale del flusso di dati. Crea un file index.html e aggiungi il seguente codice al suo interno.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Ora crea un altro file chiamato my-element.html e includi il codice seguente.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

Successivamente, crea un altro file chiamato prop-element.html e aggiungi il seguente codice.

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Produzione

Eseguire l'applicazione come mostrato nei capitoli precedenti e passare a http://127.0.0.1:8081/. Di seguito sarà l'output.

Dopo aver fatto clic sul pulsante, cambierà il valore come mostrato nello screenshot seguente.

Collegamento di due percorsi

È possibile collegare i due percorsi allo stesso oggetto utilizzando il metodo linkPaths ed è necessario utilizzare l'associazione dati per generare modifiche tra gli elementi.

Esempio

linkPaths('myTeam', 'players.5');

Il collegamento al percorso può essere rimosso utilizzando il metodo unlinkPaths come mostrato di seguito:

unlinkPaths('myTeam');

Osservatori

I cambiamenti osservabili che si verificano ai dati dell'elemento richiamano metodi noti come osservatori. Di seguito sono riportati i tipi di osservatori.

  • Vengono utilizzati semplici osservatori per osservare una singola proprietà.

  • Gli osservatori complessi vengono utilizzati per osservare più di una proprietà o percorso.

Associazione dati

Il data binding può essere utilizzato per connettere la proprietà o un attributo di un elemento dall'elemento host nel suo DOM locale. Il data binding può essere creato aggiungendo annotazioni al modello DOM come mostrato nel codice seguente.

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

L'anatomia del data binding nel modello DOM locale è simile alla seguente:

property-name=annotation-or-compound-binding

o

attribute-name$=annotation-or-compound-binding

Il lato sinistro dell'associazione specifica la proprietà o l'attributo di destinazione, mentre il lato destro dell'associazione specifica un'annotazione di associazione o un'associazione composta. Il testo nell'annotazione di rilegatura è racchiuso da delimitatori di parentesi graffa doppia ({{}}) o parentesi quadra doppia ([[]]) e l'associazione composta include una o più annotazioni di associazione letterale stringa.

Di seguito sono riportati gli elementi di supporto, che vengono utilizzati con i casi di utilizzo dell'associazione dati:

  • Template Repeater - È possibile creare un'istanza del contenuto del modello per ogni elemento in un array.

  • Array Selector - Fornisce lo stato di selezione per una matrice di dati strutturati.

  • Conditional Template - È possibile identificare il contenuto, se la condizione è vera.

  • Auto-binding Template - Specifica l'associazione dei dati all'esterno dell'elemento polimerico.

L'albero DOM attiva un evento di cambio dom, se gli elementi di supporto aggiornano l'albero DOM. A volte, puoi interagire con DOM modificando i dati del modello, non interagendo con i nodi creati. Pertanto, puoi utilizzare l'evento dom-change per accedere direttamente ai nodi.