Polymer 1.0 Variabili globali

In Polymer 0.5 il consiglio sui globals è stato delineato in questa domanda / risposta:

Variabili globali del polymer

Tuttavia in Polymer 1.0 questo non sembra funzionare. Le notifiche di modifica non vengono generate automaticamente sul modello sottostante, vengono invece generate sul che significa che le notifiche di modifica verranno generate solo su uno dei .

Qual è il modo consigliato di implementare questo modello in Polymer 1.0?

    Anche l’elemento polymer è un’opzione. Per me questa era la soluzione più semplice.

    Ho esteso la soluzione Etherealones per funzionare come comportamento e per estendere i metodi “set” e “notifyPath” di Polymers per triggersre automaticamente gli aggiornamenti. Questo è il più vicino ansible a un vero database attraverso componenti / elementi:

    globali-behavior.html:

      

    E in tutti gli elementi polimerici che dovrebbero avere accesso alla variabile globale:

       

    Esempi:

    1. Ho pubblicato un esempio completo come Gist su Github
    2. Ecco uno snippet per vederlo in azione:
         Globals Behavior Example            

    Ho implementato uno schema come iron-signals uso dei iron-signals per questo scopo. Quindi il principio di base è che tu avvisi manualmente altre istanze quando si verifica un aggiornamento.

    Considera questo:

        

    fire_ semplicemente la versione che ha un suffisso di sottolineatura come fire_ quando stai sparando un evento. Si può anche creare un comportamento del polymer di qualche tipo con questo schema, credo.

    Attenzione che le precedenti proprietà del carattere di sottolineatura sono già utilizzate da Polymer, quindi non andare avanti e convertirle in _fire .

    PS: non mi sono guardato intorno per risolvere il modo in cui riflettere la notifica di this.push(array, value); come io non ne ho bisogno. Non so se sia ansible in questo modo. Dovrebbe andare a cercare Polymer.Base.push .

    Sjmiles, uno dei creatori di Polymer, ha appena pubblicato il seguente frammento nella stanza del polymer Polymer come esempio di dati condivisi:

                   

    Two



    In realtà ho spostato la mia app sull’utilizzo della semplice associazione dati, quindi non sono sicuro della validità di questo approccio, ma forse sarebbe utile a qualcuno.

    Ho cercato di migliorare la risposta di Alexei Volkov, ma volevo definire le variabili globali separatamente. Invece dei getter / setter ho usato la proprietà observer e salvato la chiave insieme alle istanze.

    L’utilizzo è:

      

    mentre la proprietà key definisce il nome della variabile globale.

    Quindi per esempio puoi usare:

          

    Definizione del modulo dom :

       

    La demo completamente funzionante è qui: http://jsbin.com/femaceyusa/1/edit?html,output

    Ho combinato tutti i suggerimenti sopra nel seguente object polimerico globale

        

    e usalo come preferisci

          

    La modifica di data1.loader o data2.loader interessa altre istanze. È necessario estendere l’object commondata per aggiungere altre proprietà globali come mostrato con la proprietà loader.

    È molto più semplice ottenere lo stesso effetto delle variabili globali se hai avvolto l’applicazione in un modello. Guarda la spiegazione in questo video (mi sono collegato al minuto esatto e al secondo in cui è spiegato il concetto).

    Usando la soluzione di ootwch , mi sono imbattuto in una situazione di condizione di gara con componenti pigri.

    Come pubblicato, i componenti caricati con pigro non sono inizializzati con il valore dei dati condivisi.

    Nel caso in cui qualcun altro si imbatta nello stesso problema, penso di averlo risolto aggiungendo un callback pronto come questo:

     ready: function() { const key = this.getAttribute('key') if (!key) { throw new Error('cm-app-global element requires key') } const val = vars.get(key) if (!!val) { this.set('data', val) } }, 

    Spero che questo salvi qualcuno un po ‘di dolore.