流星数据库插入全局集合

meteor database insert in global collection

下面的代码应将选定的项目值插入到任务集合中,保留信息供以后使用,并且 headerLabel 应显示选定的任务。当 click .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>

假设点击可以发生多次,您需要将适当任务的 _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();
  }
});

所以我在那里做的是说找到一个任务的菜单项,该菜单项的 ID 已传递给助手。我还添加了一个 tasks 助手来获取所有任务。所以您的模板可能类似于:

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

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