Variabili globali del polimero

Question

Sto lavorando a un'app Polymer, che sta estraendo i dati da un'API RESTful e utilizzandoli per costruire l'interfaccia. Un'area specifica in cui sono bloccato concettualmente è l'implementazione del pattern di monostazione descritto allo http://www.polymer-project.org/docs/polymer/polymer.html#global. In effetti, posso aggiungere attributi dichiarativi in ​​un nuovo componente, globalmente app, quindi accedere a questo in modo abbastanza semplice.

Ecco la domanda chiave: se sto prelevando (e, potenzialmente, inviando nuovamente) i dati avanti e indietro tramite core-ajax all'API all'interno del componente app-globals, come faccio a garantire che tutti gli utenti dell'app il componente globale ha gli stessi dati? Sembra come se avessi perso la mia monostatism se uso il modello suggerito:

<polymer-element name="my-component"> 
    <template> 
    <app-globals id="globals"></app-globals> 
    <div id="firstname"></div> 
    <div id="lastname"></div> 
    </template> 
    <script> 
    Polymer('my-component', { 
     ready: function() { this.globals = this.$.globals; } 
    }); 
    </script> 
</polymer-element>  

perché ognuno dei componenti che consumano app-global saranno tirando la propria versione dei dati API. Mi sto perdendo qualcosa? C'è un altro modo per garantire che l'app abbia costantemente una sola versione della verità?

Answer 1

Ogni volta che si fa riferimento a globali di app in un componente personalizzato, viene creata una nuova istanza di globali di app. Ma ognuna di queste istanze può condividere un certo numero di proprietà (si pensi "vars" statiche in Java o "class" vars in ObjC/Swift).

Lo script all'interno dell'elemento app-globals (o qualsiasi elemento Polymer) viene eseguito solo una volta: pensatelo come in esecuzione quando viene caricata la definizione del componente. Ma la funzione Polimero all'interno di quello script dichiara un oggetto di configurazione, con proprietà e gestori di eventi del ciclo di vita, che verranno creati separatamente per ogni istanza. Lo script app-globals nel documento di riferimento (copiato sotto UPDATE: questa versione viene modificata come descritto più avanti) utilizza una chiusura anonima (una funzione che viene eseguita immediatamente), contenente sia le variabili condivise che la funzione Polymer che dichiara l'oggetto config che a sua volta fa riferimento alle variabili condivise. Quindi ogni istanza di quell'oggetto config e, a sua volta, ogni istanza di globale-app farà riferimento allo stesso insieme di variabili condivise.

<polymer-element name="app-globals"> 
    <script> 
    (function() { 
    var data = { 
     firstName: 'John', 
     lastName: 'Smith' 
    } 

    Polymer('app-globals', { 
     ready: function() { 
     this.data = data; 
     } 
    }); 
    })(); 
    </script> 
</polymer-element> 

Se uno personalizzato un'istanza del componente cambia un valore sul suo esempio app-global (o sono cambiati internamente, come i risultati di una chiamata AJAX nel tuo caso) tutti altre istanze dei componenti con un riferimento alla app -Globals vedrà il valore modificato.

UPDATE: L'originale, come copiato da:

http://www.polymer-project.org/docs/polymer/polymer.html#global

aveva un deficit, come descritto da @zreptil, se si modificano i valori dei dati, i nuovi valori non sono disponibili per tutti gli altri casi - perché le variabili di istanza sono solo copie delle stringhe di riferimento. Usando un oggetto con proprietà dei dati, come nella versione modificata sopra, e sempre e solo leggendo da e assegnando alle proprietà dei dati di quell'oggetto piuttosto che sovrascrivendo l'oggetto stesso, i valori modificati sono condivisibili tra le istanze.

Answer 2

@Zreptil ha richiesto un esempio sopra, e poiché ho dovuto sperimentarlo, ne ho comunque realizzato uno basato sulla risposta di Tim Stewart e sulla documentazione Polymer.

Esempio completo: http://jsbin.com/figizaxihe/1/edit?html,output

Ho avuto alcuni problemi con trattini nel id (id="global-variable"), così ho aggiunto anche un esempio per questo.

La definizione elemento

<polymer-element name="app-globals"> 
<script> 
    (function() { 
    var data = { 
     firstName: 'John' 
    } 

    Polymer({ 
     ready: function() { 
     this.data = data; 
     } 
    }); 
    })(); 

</script> 
</polymer-element> 

usarlo in un elemento polimerico

<polymer-element name="output-element" noscript> 
<template> 
    <app-globals id="globalvars"></app-globals> 
    <h4>Output-Element</h4> 
    <div>First Name: {{$.globalvars.data.firstName}}</div> 
</template> 
</polymer-element> 

Utilizzare all'esterno un elemento polimerico

<template is="auto-binding"> 
    <app-globals id="topglobals"></app-globals> 
    <h3>First Name in Title: {{$.topglobals.data.firstName}}</h3> 
</template> 

Attenziione con lineette/trattini

<h3>and since that took me a while to realize - dashes are not directly supported...</h3> 
<template is="auto-binding"> 
    <!-- can use different id's --> 
    <app-globals id="global-variables"></app-globals> 
    <div>This does not work: {{$.global-variables.data.firstName}}</div> 
    <div>Correct syntax: {{$['global-variables'].data.firstName}}</div> 

</template> 

Polymer 1,0

Vedere Polymer 1.0 Global Variables per un polimero 1,0 soluzione se interessati.