我可以使用Meteor将this._id值从一个模板助手传递给另一个模板助手吗? [英] Can I pass the this._id value from one template helper to another with Meteor?

问题描述

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

I have the following templates (.html) with their respected managers (.js files):

• adminManageCategories
• adminAddCategory
• adminUpdateCategory

请考虑以下内容:

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

    {{> adminUpdateCategory}}
</template>

请注意，{{> adminUpdateCategory}}在迭代之外.这也是一种形式，我想将其保留在同一页面上.

Notice the {{> adminUpdateCategory}} is outside of the iteration. This is also a form, and I want to keep it on the same page.

和admin_manage_categories.js

And admin_manage_categories.js

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

请注意console.log()函数可以正常工作，因为模板管理器足够聪明，可以知道所单击项目的ID.

Notice the console.log() function, which works, as the template manager is smart enough to know the ID of the item that was clicked.

我要做的是单击该项目时将这些项目值加载到表单中.上面的例子很苗条，但是在我的真实数据中，我有一个标题，排序顺序等等.

What I want to do is load this items values into the form when clicked. My example above is slim, but in my real data I have a title, sort order, among other things.

所以我的问题是，将_id从adminManageCategories模板传递到adminUpdateCategory模板(即表单)的正确方法是什么.

So my question is, what would be the proper way to pass the _id from the adminManageCategories template to the adminUpdateCategory template, which is the form.

我可以用javascript破解并使事情发生，但是我认为我错过了做事的流星方法".

I can hack at this with javascript and make things happen, but I think I'm missing a "meteor way" of doing things.

我感谢您的帮助.谢谢.

I appreciate the help. Thank you.

推荐答案

您需要使用 ReactiveVar 存储当前单击的项目.

You need to use a ReactiveVar to store the currently clicked item.

首先，您需要运行meteor add reactive-var，因为它不是默认在标准流星Web应用程序中添加的程序包.

First you need to run meteor add reactive-var, as it's not a package added by default in a standard meteor web app.

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回调中初始化react-var时，将其设置为null，这意味着在单击一项之前，帮助程序也将返回null，并且您将尝试在其中访问this.item._id adminUpdateCategory这将失败.

When I initialize the reactive-var in the created callback, I set it to null, this means that until one item is clicked, the helper will return null too and when you'll try to access this.item._id in the adminUpdateCategory this will fail.

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

The simplest way to solve this issue is maybe to not initialize the variable to null but to the first item in the collection.

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

在某些情况下，您的集合中有0个项目，因此您可能最终不得不避免JS中该项目的存在.

There may still be a case when you have 0 items in the collection, so you'll probably end up having to guard against the existence of the item in the JS.

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

这篇关于我可以使用Meteor将this._id值从一个模板助手传递给另一个模板助手吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！