Question

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

也许这是错误的编码，并且有更好的方法在所选元素的列表和显示之间切换！

Users仅作为示例。可以是任何集合/数据

模板

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

Answer 1

首先，您不能将ReactiveVar用于交叉模板。请改用Session。试试这个，让我知道：

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

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

1 个答案: