在相同流程下呈現備用組件：路由器URL

Question

如何在一個頁面應用中呈現兩個不同視圖而不更改URL。我使用流星默認的火焰以及流：路由器包。現在，我有它設置如下： 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 /列表，我不希望出現這種情況。我想簡單地在同一個url中渲染一個備用組件模板。如果這是顯而易見的，我對編碼很陌生，所以原諒我。基本上我只想要兩種不同的視圖樣式：一個列表和一個日曆。所以我想要一種方法來設置它，以便在單擊某個按鈕時可以渲染空格鍵模板，如果單擊了另一個按鈕，則可以渲染不同的空間模板。

非常感謝您的幫助，我一直在這幾天:)

Answer 1

您可以在一個模板內處理這個像這樣：

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，和我們去如上

這似乎是一項艱鉅或過於複雜，但沒有什麼花哨這裏發生的一切。你會很快適應它

Answer 2

創建另一個模板，它有條件地呈現特別的看法。事情是這樣的：

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