Question

如何在不改变网址的情况下在单页应用中呈现两个不同的视图。我使用meteor和默认的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并且我不想要那样。我想在同一个网址中简单地渲染一个替代组件模板。我对编码很陌生，如果这很明显，请原谅我。基本上我只想要两种不同的视图样式：列表和日历。所以我想设置一种方法，以便在单击某个按钮时可以渲染一个空格键模板，如果单击另一个按钮，则可以渲染另一个模板。

非常感谢您的帮助，我已经在这里待了几天：）

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>

您需要在ReactiveVar模板中设置ListOrCalendar：

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

请参阅ReactiveVar解释here（忽略会话）

然后你会得到一个帮助器，它返回你的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
- 以便displayList返回true
- 以便满足模板中的#if displayList条件
- 所以显示List模板
单击按钮时
- ReactiveVar设置为false
- 因此displayList助手返回false
- 因此模板中的#if displayList条件不，并且会转到else语句
- 等等，最后显示Calendar模板
再次点击该按钮后，ReactiveVar切换回true，我们按上述方式行驶

这可能看起来令人生畏或过于复杂，但根本没有任何幻想。你很快就会习惯它

在同一流下呈现备用组件：路由器URL

2 个答案: