Javascript 在所有元素的列表和选定元素的显示之间切换

我需要显示一个列表来选择一个元素。通过选择要显示编辑表单的元素。因此，我使用的是reactiveVar，但我没有将所选元素的id获取到编辑表单/帮助器以获取所有需要的数据

也许这是糟糕的编码，有更好的方法在列表和所选元素的显示之间切换

用户

就是一个例子。可以是任何集合/数据

模板

<template name="users">

    {{#if userId}}
        {{ > userEdit userId}}
    {{else}}

        <h1>List</h1>

        <div id="usersList">
            <ul>
                {{#each users}}
                    <li data-id="{{_id}}">{{users.name}}</li>
                {{/each}}
            </ul>
        </div>

    {{/if}}

</template>

<template name="userEdit">

    <h1>Edit User</h1>

    <form id="userEdit" data-id="{{user._id}}">
        <label><input type="text" name="name" value="{{user.name}}"> Name</label>
    </form>

</template>

Template.users.helpers({
    users:      function() { return Users.find({}) },
    userId:     function() { return Template.instance().userId.get(); }
});

Template.userEdit.helpers({
    user:       function() { return Users.findOne({ _id: Template.instance().parentView.userId.get() }); }
});

Template.users.onCreated(function() {
    this.userId = new ReactiveVar();
});
Template.users.events({
    'click #usersList li': function(event, template) {
        var $this = $(event.currentTarget),
            id    = $this.attr('data-id');

        if (id)
            template.userId.set(id);
    }
});

事件

<template name="users">

    {{#if userId}}
        {{ > userEdit userId}}
    {{else}}

        <h1>List</h1>

        <div id="usersList">
            <ul>
                {{#each users}}
                    <li data-id="{{_id}}">{{users.name}}</li>
                {{/each}}
            </ul>
        </div>

    {{/if}}

</template>

<template name="userEdit">

    <h1>Edit User</h1>

    <form id="userEdit" data-id="{{user._id}}">
        <label><input type="text" name="name" value="{{user.name}}"> Name</label>
    </form>

</template>

Template.users.helpers({
    users:      function() { return Users.find({}) },
    userId:     function() { return Template.instance().userId.get(); }
});

Template.userEdit.helpers({
    user:       function() { return Users.findOne({ _id: Template.instance().parentView.userId.get() }); }
});

Template.users.onCreated(function() {
    this.userId = new ReactiveVar();
});
Template.users.events({
    'click #usersList li': function(event, template) {
        var $this = $(event.currentTarget),
            id    = $this.attr('data-id');

        if (id)
            template.userId.set(id);
    }
});

---

首先，不能将ReactiveVar用于跨模板。改用会话。试试这个，让我知道：

Template.users.events({
  'click #usersList li': function(event, template) {
    Session.set('userId', this._id)
    console.log(Session.get('userId'));
  }
});

Template.userEdit.helpers({
  user: function() {
    return Users.findOne({ _id: Session.get('userId')});
  }
});

---

当然，您可以跨模板使用ReactiveVar，这取决于您如何确定它的范围和/或您的模板js的组织方式。不，您不能。但是你可以使用一些技巧（你已经说过的），这对新用户来说并不容易——基本的js技巧。该文档中没有提到模板。“ReactiveVar没有全局名称，比如Session.get（“foo”）中的“foo”。相反，它们可以在本地创建和使用，例如附加到模板实例，如：this.foo.get（）”

myGlobalReactiveVar=new ReactiveVar（0）

创建全局ReactiveVar。