javascript - Meteor:显示文档特定信息

Question

在我的导航栏中，我对集合调用 find() 以列出所有可用文档。

文档可能看起来像这样:

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

导航栏旁边有我的主要内容区域。

导航栏显示所有找到的文档的标题。但我希望每个都是一个链接。当用户单击其中一个文档标题时，我希望主要内容区域仅显示该文档的信息值

我的问题是如何告诉信息区域哪个文档标题已被单击，以便它知道要显示哪些信息？

我考虑过使用 session ，因此每次标题点击都会调用一个执行以下操作的函数:

Session.set("curTitle", id);

然后在显示信息时，我可以使用 Session.get() 来检索我需要显示的文档的 ID

这是使用 Meteor 处理此类情况的正确方法吗？或者有更好的方法来实现这一目标吗？

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>

您现在只需在标题周围添加一个 a 标签即可。我们已经将 router.js 中的路径命名为 router 中的 pathName

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

编辑: 我使用 {{> yield 'specic-place'}} 编写路由示例的原因是您可以在任何模板中使用它们。例如:

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

您回家的路线:

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

因此，当您转到“/”时，它会将主页模板呈现为 {{> Yield}}。假设您不想将内容加载到 {{> Yield}}，但您想将其加载到已渲染到 {{>yield}} 的主模板内

<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>

如果有什么不明白的地方请告诉我。干杯。