Meteor：为模板存储选定对象的位置答案

【问题标题】：Meteor: Where to store a selected object for a tempateMeteor：为模板存储选定对象的位置
【发布时间】：2015-07-03 07:39:13
【问题描述】：

我是流星新手，有一个简单的问题，我似乎找不到好的答案...

我有一个简单的页面，左侧有一个人员列表，右侧有一个模板显示他们的详细信息，包括编辑、操作等。

当我单击左侧的人时，存储所选人员对象以供模板使用的最佳位置在哪里？我已经构建了一个页面，并将其存储在“selectedPerson”会话对象中，但看起来这并不是最好的地方。关于如何在不污染会话空间的情况下为模板和相关 JS 代码存储它有什么建议吗？

【问题讨论】：

您可以添加一个范围为模板的反应变量。请参阅this post 了解更多信息。
我的意思是，这在很大程度上取决于你，程序员，想要从中得到什么。您选择了一个人 - 您是否同意所选的人在页面刷新时消失？您是否希望所选人员在页面刷新时保持不变？您是否想要某种方式与已选择的人一起进入特定路径？您是否希望所有连接的客户也有该选定的人？
感谢@DavidWeldon，这看起来可能就是我要找的东西。
@fuzzybabybunny，让我们保持简单，我不关心页面刷新，不需要直接的 url 链接，只有这个客户选择了这个人。仅使用会话变量是否正常并被接受，还是有“更清洁”的方式？
@FloatingCoder 好酷。如果您愿意，我可以添加一些示例作为答案。

标签： meteor

【解决方案1】：

Meteor 模板支持在模板范围内任意定义变量的能力。

您可以使用事件很容易地更改当前模板数据空间以反映所选人员。

下面又快又脏

<template name='personSelector'>
    <div class='personList'>
        <ul id='personsListing'>
            {{#if personsReady}}
                {{#each persons}}
                    <li class='person' data-id='{{this._id}}'>{{this.name}}</li>
                {{/each}}
            {{/if}}
        </ul>
    </div>

    <div class='personDetails'>
        {{#if getSelectedPerson this.selectedPerson}}
            {{#with getSelectedPerson this.selectedPerson}}
                <div class='personDisplay'>
                    <h1>Person Name: {{this.name}}</h1
                    ...
                    ...
                    ...
                </div>
        {{else}}
            <p>Please click on a person from the list on the left</p>
        {{/if}}
    </div>
</template>

Template.personSelector.created = function() {
    this.data.selectedPerson = null;
}

Template.personSelector.events({
    'click .showPerson': function(event, template) {
        e.preventDefault();
        // Get the id of the person selected and bind it into the template
        var _id = $(event.target).data('id');
        if(_id) template.data.selectedPerson = _id;

    }
})

【讨论】：