8
votes

Quels commandes où l'itinéraire de chargement de Ember est affiché?

J'aurais pensé que le loadingroute afficherait son modèle dans le {{sortie}} de la principale venView, mais cela ne semble pas que ce soit. Qu'est-ce qui détermine où il va?

Voici un JS bin de mon problème. Le message de chargement ne s'affiche pas là où j'attends.


0 commentaires

4 Réponses :


1
votes

Si vous augmentez le délai d'attente, vous pourrez remarquer que le modèle code> Chargement code> est connecté à la fin du document. Il est probablement conçu pour être utilisé avec des superpositions d'éléments positionnés fixes.

Vous pouvez ajouter une autre sortie code> (appelée Chargement code> dans l'exemple ci-dessous) et forcer le rendu de Chargement code> Modèle avec itinéraire Rendertemplate Code> Crochet: P>

App.LoadingRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("loading", { outlet: 'loading', into: 'application' });
    }
});


4 commentaires

Je reçois une erreur: Couvent TypeError: Impossible d'appeler la méthode 'ConnectOutlet' de indéfinie . Malheureusement, j'ai du mal à reproduire à Jsbin. Des idées?


Avez-vous créé de nouvelles, nommés sortie dans votre modèle de demande?


Oui. Lorsque j'appelle Ceci.Render ("Chargement" ... Je reçois une erreur dans le code de Ember indiquant que le parentview est indéfini.


Semblait être comme le chemin n'avait pas encore changé? J'ai enveloppé votre this.render dans un code conditionnel: si ((((Ceci.Controllerfor ('Application'). Obtenez ('actuelPath')) {... . idée pourquoi ça se passe?



5
votes

En effet, il semble qu'il soit inséré juste avant la balise de fermeture de la balise avec la classe Ember-application code>. Vous pouvez contrôler à quel sortie code> il est inséré à l'aide de rendutemplate :

<script type="text/x-handlebars" data-template-name="application">
  <div id="twenty-fifth-cdu-production">

    {{#view App.Sidebar}}
    <div id="left-panel">
      <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
      </ul>
    </div>
    {{/view}}

    <div id="center-panel" class="container-fluid">
      {{outlet}}
      {{outlet "loading"}}
    </div>
  </div>
</script>


0 commentaires

3
votes

Supposons que vous ayez cette mappage:

App.FooRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render("foo", { into: "sometemplate" })
    }
});


3 commentaires

Je n'ai pas compris la hiérarchie. Je pense que cela répond mieux à ma question - merci!


Dans cette question Stackoverflow.com/Questtions/16476977/... est utilisé une cartographie d'itinéraire multi-niveaux. Cela crée une sorte de hiérarchie. L'applicationRoute est la topest de l'Hiliarchy et c'est le parent pour toutes les routes mappées par cela.Route ("myRoute"). Mais au moment où LoadingRoute se comporte différente.


Merci! Je voulais dire, je n'ai pas compris la hiérarchie avant d'avoir expliqué. Je l'obtiens maintenant :)



0
votes

Je suppose que ce comportement est intentionnel, le loadingRoute code> pourrait fonctionner pendant que le ApplicationRoute code> est en cours de chargement. Rendu Le modèle de demande manuellement devrait vous permettre de rendre dans l'un de ses points de vente.

App.LoadingRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("application");
        this.render("loading", { outlet: "loading", into: "application" });
    }
});


1 commentaires

Oui, je pense que c'est vrai. La valeur par défaut est pour la route de chargement pour ajouter son modèle sur le corps. Je pense que c'est là que j'ai été confus. Dans votre exemple, je ne pense pas que vous devez même appeler ceci.Render ('application') .