Rend les autres composants sous le même flux: URL du routeur

Question

Comment rendre deux affichages différents dans une application d'une page sans modifier les URL. J'utilise météore avec le blaze par défaut ainsi que le paquet flow: router. En ce moment, je l'ai mis en place comme ceci: routes.js ..

FlowRouter.route("/", { 
    name: "App.home", 
    action() { 
    BlazeLayout.render("App_body", { 
     main: "App_home", 
     mainContent: "calendar" 
    }); 
    } 
}); 

FlowRouter.route("/list", { 
    name: "App.list", 
    action() { 
    BlazeLayout.render("App_body", { main: "App_home", mainContent: "list" }); 
    } 
}); 

mais cette façon, je suis en utilisant l'URL/liste et je ne veux pas que. Je voudrais simplement rendre un modèle de composant alternatif dans la même URL. Je suis très novice en codage, alors pardonnez-moi si c'est évident. Essentiellement, je veux juste deux styles de vue différents: une liste et un calendrier. Donc, je voudrais un moyen de le configurer de sorte qu'un modèle de barre d'espace peut être rendu si un certain bouton est cliqué, et un autre peut être rendu à la place si un autre bouton est cliqué.

Merci beaucoup pour toute aide, que je suis dans ce domaine depuis quelques jours :)

Answer 1

Vous pouvez gérer cela dans un seul modèle comme ceci:

FlowRouter.route('/', { 
    name: 'App.home', 
    action() { 
    BlazeLayout.render('App_body', { main: 'App_home', mainContent: 'ListOrCalendar' }); 
} 

Et puis le modèle ListOrCalendar ressemblerait à ceci:

{{#if displayList}} 
    {{> List}} 
{{else}} 
    {{> Calendar}} 
{{/if}} 
<button>Switch</button> 

Vous devez configurer un ReactiveVar dans le modèle ListOrCalendar:

Template.ListOrCalendar.onCreated(function() { 
    const instance = this; 
    instance.displayList = new ReactiveVar(true); 
}); 

Voir ReactiveVar explication here (ignorer session)

Ensuite, vous auriez une aide qui retourne la valeur de votre ReactiveVar:

Template.ListOrCalendar.helpers({ 
    displayList() { 
    const instance = Template.instance(); 
    return instance.displayList.get(); 
    } 
}); 

Enfin, vous le feriez raccorder un événement pour changer la valeur de displayList pour passer d'un modèle à l'autre:

Template.ListOrCalendar.events({ 
    "click button"(event, instance) { 
    const displayListCurrent = instance.displayList.get(); 
    const displayListNew = !displayListCurrent; 
    instance.displayList.set(displayListNew); 
    // or, more concisely, instance.displayList.set(!instance.displayList.get()); 
    } 
}); 

Donc, en résumé:

• Lorsque le modèle est créé, votre ReactiveVar est true
  • afin que vos displayList retours true
  • si la condition #if displayList dans le modèle est satisfait
  • et le modèle List est affiché
• Lorsque le bouton est cliqué
  • Le ReactiveVar est réglé sur faux
  • donc le retour aide displayListfalse
  • si la condition #if displayList dans le modèle est pas satisfait et il va à la else instruction
  • et ainsi, enfin, le modèle Calendar est affiché
• Lorsque le bouton est cliqué à nouveau, le ReactiveVar est décommuter à true, et nous allons comme ci-dessus

Cela peut sembler intimidant ou trop compliqué, mais il n'y a rien envie d'aller ici tout . Vous allez vous y habituer assez rapidement

Answer 2

créez un autre modèle, ce qui rend vue notamment conditionnelle.Quelque chose comme ceci:

FlowRouter.route("/", { 
    name: "App.home", 
    action() { 
    BlazeLayout.render("App_body", { 
     main: "App_home", 
     mainContent: "listOrCal" 
    }); 
    } 
}); 

<template name="listOrCal"> 
    {{#if showList}} 
    {{> list}} 
    {{else}} 
    {{> calendar}} 
    {{/if}} 
    <button id="switchView">Switch view</button> 
</template> 

Template.listOrCal.onCreated(function listOrCalOnCreated() { 
    this.showList = new ReactiveVar(true); 
}) 

Template.listOrCal.helpers({ 
    showList() { 
    return Template.instance().showList.get(); 
    } 
}) 

Template.listOrCal.events({ 
    'click #switchView' { 
    let showList = Template.instance().showList.get(); 
    Template.instance().showList.set(!showList); 
    } 
})