流星：顯示文檔特定信息

Question

在我的導航欄中，我通過集合上的find()來列出所有可用的文檔。

的文件可能是這個樣子：

{id: 1, title: title, info: "info about this doc"} 

旁邊的導航欄我有我的主要內容區域。

導航欄顯示所有找到的文檔的標題。但我希望每個人都能成爲一個鏈接。當用戶點擊其中一個文檔標題時，我想讓主要內容區域顯示該文檔的信息值

我的問題是如何告訴信息區哪個文檔標題已被點擊，所以它知道要顯示哪些信息？

我想過使用會話，所以每個標題點擊呼叫，做類似的功能：

Session.set("curTitle", id); 

，然後顯示信息的時候，我可以只使用Session.get()找回我需要的文檔的id以顯示

這是正確的方式來處理這種類型的情況與流星？還是有更好的方法來實現這一目標？

Answer 1

我強烈建議你使用iron:router

如果你想知道如何做到這一點，這裏是一個完整的例子：

//router.js on the client folder 
Router.configure({ 
    //your main layout template 
    layoutTemplate:'yourTemplateName' 
}); 

我們正在創建一個加載主要內容的路由當你點擊標題

Router.route('/pathyouwant/:_id', function() { 
    //we specify what we want to render and where which is also connected to our html 
    this.render('yourTemplateWithMainData', { 
     data: function() { 
      return CollectionName.findOne({_id: this.params._id}); 
     }, 
     //this is connected to your html. see the next code. 
     to: 'load-it-here' 
    }) 
},{ 
    name: 'pathName' //we name the path to use it inside the links 
}); 


<template name="yourTemplateName"> 
    //not going to add all the html elements but only important parts 
    //lets say this is how you show only titles: 
    {{#each somethings}} 
     {{title}} 
    {{/each}} 


    <div class="some-div"> 
     //we specify where the content will load in our html here. 
     {{> yield 'load-it-here'}} 
    </div> 
</template> 

你只需要在標題周圍添加一個標籤。我們已經命名我們在router.js作爲名path在我們的路由器

<a href="{{pathFor route='pathName'}}">{{title}}</a> 

編輯： 我寫了路由例子的原因{{>產生「特定的地方」}}是你可以使用它們在任何模板中。例如：

<template name="mainTemplate"> 
    {{>yield}} 
</template> 

您的家庭路線：

Router.route('/', function() { 
    this.render('home'); //every route without a specified 'to:' will load to {{> yield}} automatically 
}); 

所以，當你去 '/' 它呈現家裏模板{{>產量}}。比方說，你不希望加載內容到{{>產量}}，但要加載它，你已經渲染到{{>收益率}}家裏模板中

<template name="home"> 
    //other elements, nav bar etc. 
    <div class="left-panel"> 
     {{#each somethings}} 
      <a href="{{pathFor route='pathName'}}">{{title}}</a> 
     {{/each}} 
    </div> 

    <div class="content-area"> 
     {{> yield 'load-it-here'}} 
    </div> 

</template> 

讓我知道如果有些東西你不明白。乾杯。