在相同 flow:router URL 下呈现替代组件

Question

如何在不更改 URL 的情况下在一个页面应用程序中呈现两个不同的视图。我正在使用带有默认 blaze 的流星以及 flow:router 包。现在我把它设置成这样： 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" });
  }
});

但我使用的是 url /list，但我不希望这样。我想简单地在同一个 url 中呈现一个备用组件模板。我对编码很陌生，如果这很明显，请原谅我。本质上我只想要两种不同的视图样式：列表和日历。所以我想要一种方法来设置它，以便在单击某个按钮时可以呈现空格键模板，而在单击另一个按钮时可以呈现不同的模板。

非常感谢您的帮助，我已经用了几天了:)

Answer 1

创建另一个模板，它有条件地呈现特定视图。像这样：

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);
  }
})

Answer 2

您可以像这样在单个模板中处理此问题：

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

然后 ListOrCalendar 模板将如下所示：

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

您将在 ListOrCalendar 模板中设置一个 ReactiveVar：

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

参见ReactiveVar解释here（忽略会话）

然后你会有一个助手，它 returns 你的 ReactiveVar 的值：

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

最后，您将连接一个事件来更改 displayList 的值以在模板之间切换：

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());
  }
});

所以，总结一下：

创建模板后，您的 ReactiveVar 是 true
- 所以你的displayListreturnstrue
- 所以满足模板中的#if displayList条件
- 因此显示 List 模板
点击按钮时
- ReactiveVar设置为false
- 所以 displayList 助手 returns false
- 所以模板中的 #if displayList 条件不满足，它转到 else 语句
- 等等，最后显示 Calendar 模板
再次单击该按钮时，ReactiveVar 切换回 true，然后我们继续上述操作

这可能看起来令人生畏或过于复杂，但这里并没有什么特别的。你很快就会习惯的

在相同 flow:router URL 下呈现替代组件

rendering alternate components under the same flow:router URL

meteor

meteor-blaze

spacebars

flow-router