Comment structurer un SPA Polymer?

Je suis nouveau à Polymer 1.0.

Je reçois l'ensemble de la philosophie «tout est un élément» mais, dans quelle mesure? Comment structurer tous ces éléments ensemble?

TL;DR: Is there an equivalent to the main() function with Polymer and WebComponents in general ? If so , where should it be and what should it do ?

Je regarde habituellement des exemples, des démos et des projets pour voir comment cela devrait fonctionner, mais parce que Polymer est si nouveau (surtout v1.0), j'ai du mal à trouver des exemples non triviaux.

Version longue

Je comprends comment utiliser Polymer pour créer des éléments. Mais je frappe un roadbloack quand je veux les relier. Quelle structure dois-je utiliser pour faire parler les composants entre eux?

Venant d'un fond angulaire j'ai une vision relativement précise de ce qui devrait aller où. Par exemple: les données sont contenues dans des portées accessibles à partir de contrôleurs, de directives et d'éléments html et vous pouvez utiliser des services pour extraire des données de différentes parties de l'application.

Dans Polymer je ne comprends pas où sont les limites des données. Pas dans le composant lui-même mais en dehors de celui-ci, où il vit et si un autre composant peut y accéder. Un dessin simple pourrait m'aider beaucoup. Il n'y a pas une telle chose expliquée dans les docs de polymère, probablement parce que c'est plus large que Polymer.

Pour vous donner un aperçu de mon problème, voici ce que j'ai trouvé:

  1. I set up a SPA based on Polymer Starter Kit
  2. I wanted to wire it to firebase with the firebase-element
  3. I created my own element which itself use :

    <link rel="import" href="../../bower_components/polymer/polymer.html">
    <link rel="import" href="../../bower_components/firebase-element/firebase-auth.html">
    
    
      
     
    
    <script>
    Polymer({
      is: 'my-login',
      properties: {
        successRedirect: String
      },
      _errorHandler: function(e){
        console.log(e.detail);
      },
      _loginHandler: function(e){
        if(this.successRedirect){
         //How can I tell pagejs to redirect me ?
          app.route = this.successRedirect;
        }
      }
    });
    </script>
    

Fondamentalement Comment puis-je dire pagejs (ma bibliothèque de routage) pour rediriger l'application vers une page après une connexion réussie? Ma pagejs config vit dans son propre fichier routing.html et je ne comprends pas comment reconstituer tout cela.

J'espère que quelqu'un sera capable de comprendre cette vaste question et, espérons-le, m'aidera.

Merci

0
Merci @ebidel c'est le genre d'article que je cherchais.
ajouté l'auteur dot-louis, source
Cependant le portage à Polymer 1.0 aiderait parce qu'il y a un peu de changements incompatibles. Je comprends aussi la chose "écrire moins javascript". Mais parfois, vous devez verser une logique entre les composants. Et ce n'est toujours pas très clair pour moi où cette logique appartient.
ajouté l'auteur dot-louis, source
J'ai écrit un article détaillé sur la construction d'un SPA en utilisant Polymer: polymer-project.org/ 0.5/articles/spa.html . Il est basé sur 0,5 éléments mais les idées et la structure sont universelles.
ajouté l'auteur ebidel, source

1 Réponses

Réponse courte: Auditeurs d'événements. Placez un écouteur d'événement sur votre routeur. Demandez au gestionnaire de connexion de déclencher l'événement sur le routeur. Le routeur va ramasser cet événement et ensuite rediriger.

...
_loginHandler: function(e){
  if(this.successRedirect){
   //How can I tell pagejs to redirect me ?
    var router = document.querySelector('router');
    router.dispatchEvent(new Event('redirect', {redirectURL: this.successRedirect});
    app.route = this.successRedirect;
  }
}
...

Puis dans votre routeur:

connectedCallback() {
  this.addEventListener('redirect', function(event) {
    var url = event.redirectURL;
   //Redirect using the router's API.
  });
}
0
ajouté