Question

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

adminManageCategories
adminAddCategory
adminUpdateCategory

请考虑以下事项：

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

    {{> adminUpdateCategory}}
</template>

注意{{＆gt; 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破解这个并让事情发生，但我想我错过了一个流星的方式＆＃34;做事。

我很感激帮助。谢谢。

Answer 1

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

首先，您需要运行meteor add reactive-var，因为它不是标准流星网络应用中默认添加的包。

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

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

1 个答案: