我可以使用 Meteor 将 this._id 值从一个模板助手传递到另一个模板助手吗？

Question

我有以下模板 (.html) 及其受人尊敬的经理（.js 文件）：

• adminManageCategories
• adminAddCategory
• adminUpdateCategory

考虑以下几点：

<template name="adminManageCategories">
    {{#each category}}
        <div class="clickme">{{title}}</div>
    {{/each}}
 
    {{> adminUpdateCategory}}
</template>

注意 {{> adminUpdateCategory}} 在迭代之外。这也是一个表格，我想保持在同一页面上。

还有 admin_manage_categories.js

Template.adminManageCategories.events({
    "click .clickme": function(event) {
        event.preventDefault();
        console.log(this._id);
    }
});

请注意console.log() 函数，该函数有效，因为模板管理器足够聪明，可以知道被点击项目的ID。

我想要做的是在单击时将此项目值加载到表单中。我上面的例子很简单，但在我的真实数据中，我有一个标题、排序顺序等。

所以我的问题是，将 _id 从 adminManageCategories 模板传递到 adminUpdateCategory 模板的正确方法是什么？

我可以用 JavaScript 解决这个问题并让事情发生，但我认为我缺少一种“流星方式”的做事方式。

Answer 1

您需要使用ReactiveVar 来存储当前点击的项目。

首先你需要运行meteor add reactive-var，因为它不是标准meteor web应用默认添加的包。

JS：

Template.adminManageCategories.created=function(){
  // instantiate the reactive-var in the created callback
  // we store it as a property of the template instance
  this.currentItemId=new ReactiveVar(null);
};

Template.adminManageCategories.helpers({
  // this helper reactively returns the currently clicked item
  currentItem:function(){
    // retrieve the reactive-var from the template instance...
    var currentItemId=Template.instance().currentItemId.get();
    // ...to fetch the correct collection document
    return Items.findOne(currentItemId);
  }
});

Template.adminManageCategories.events({
  "click .clickme": function(event,template) {
    event.preventDefault();
    // assign the correct item id to the reactive-var attached to this template instance
    template.currentItemId.set(this._id);
  }
});

HTML：

<template name="adminManageCategories">
  {{#each category}}
    <div class="clickme">{{title}}</div>
  {{/each}}
  <p>Current item title is : {{currentItem.title}}</p>
  {{! pass the currentItem as a parameter to your child template this will be
      accessible as {{item}} in the HTML and "this.item" in JS helpers or
      "this.data.item" in created/rendered/destroyed callbacks}}
  {{> adminUpdateCategory item=currentItem}}
</template>

编辑：

当我在created 回调中初始化reactive-var 时，我将它设置为null，这意味着在单击一项之前，帮助程序也将返回null，并且当您尝试访问this.item._id 时adminUpdateCategory 这将失败。

解决此问题的最简单方法可能是不将变量初始化为 null，而是将变量初始化为集合中的第一项。

Template.adminManageCategories.created=function(){
  var firstItem=Items.findOne({},{
    sort:{
      sortedField:1
    }
  });
  this.currentItemId=new ReactiveVar(firstItem && firstItem._id);
};

可能仍然存在集合中有 0 个项目的情况，因此您可能最终不得不防范 JS 中存在该项目。

Template.adminUpdateCategory.helpers({
  itemProperty:function(){
    return this.item && this.item.property;
  }
});