Question

下面的代码应该在Tasks集合中插入所选的项目值，保留信息供以后使用，headerLabel应该显示所选的任务。当单击.menuItem函数运行时，我无法让headerLabel显示任务。感谢

Tasks = new Mongo.Collection('tasks');

Template.mainMenu.events({
  'click .menuItem': function(event){
   Tasks.insert({menuItem: $(event.currentTarget).data('value')});
 }
});

Template.header.helpers({
 headerLabel: function( id ){
 return Tasks.findOne({_id: id}).menuItem;
 },
  tasks: function(){
  return Tasks.find();
 }
});

<template name="mainMenu">
<div class="container">
<div class="row">
  <section class="col-xs-12">
    <div class="list-group">
      {{#each menuItems}}
        <a href="#" class="list-group-item menuItem" data-value={{menuItem}}>
          <img src="/abc.png">
          {{menuItem}} <span class="badge">&#x3e;</span>
        </a>
      {{/each}}
    </div>
  </section>
</div>

<template name="header">
 <h1><button class="col-xs-2 mainMenu" type="button">&#9776;</button></h1>
 <h3>
   <label class="col-xs-8 text-center">
     {{#if headerLabel}} {{headerLabel}}  {{else}} Select an item {{/if}}
   </label>
</h3>
<h1><button class="col-xs-2" type="button">&#8942;</button></h1>
</template>

Answer 1

假设点击可能多次发生，您需要将适当任务的_id传递给您的帮助者：

Tasks = new Mongo.Collection('tasks');

Template.mainMenu.events({
  'click .menuItem': function(event){
   Tasks.insert({menuItem: $(event.currentTarget).data('value')});
 }
});

Template.header.helpers({
  headerLabel: function( id ){
    var task = Tasks.findOne({_id: id});
    if( task ) {
      return task.menuItem;
    }
  },
  tasks: function() {
    return Tasks.find();
  }
});

所以我在那里做的就是找一个任务的menuItem将ID传递给帮助器。我还添加了一个tasks帮助程序来完成所有任务。因此，您的模板可能类似于：

<template name="mainMenu">
    {{#each task in tasks}}
        <h4>{{headerLabel task._id}}</h4>
        <!-- Additional code here... -->
    {{/each}}
</template>

您显然需要根据您的具体情况自定义HTML，但这应该为您提供要点。希望有所帮助！

meteor数据库插入全局集合

1 个答案: