javascript - meteor .js : how to call helper method from event?

Question

我怀疑我没有按照 Meteor 的方式来做这件事。我正在制作一个共享的交互式日历。

我有一个日历模板:

<template name="calendar">
<h2>Calendar</h2>
<div class="calendar">{{#each days}}
    {{> day}}
    {{/each}}
</div>
</template>

使用返回日期对象的助手:

     {
        date: thisDate.getDate(),
        dateString: dateString,
        done: done,
        today: isToday
      }

我有一天模板:

<template name="day">
  <div class="day {{stateString}}">{{date}}</div>
</template>

有一些帮助者(meetingID 目前为开发硬编码):

  Template.day.helpers({
    state: function(){
      // retreive from DB
      var s = Meetings.findOne({"_id":meetingID}).dates[this.dateString];
      return s;
    }
    stateString: function(){
      var stateString;

      switch(this.state){
        case -1: stateString = "unknown"; break;
        case 0: stateString = "unavailable"; break;
        case 1: stateString = "available"; break;
      }
      if(this.done) stateString = "done";

      return stateString;
    }
  });

state() 从数据库中获取状态，stateString() 为该状态选择正确的类名。

当你点击它时，你会循环显示状态(1:可用，0:不可用，-1:未知):

  Template.day.events({
    "click": function(){
      if(this.done) return false;   // no state changes for past days!
      console.log(e);
      var newState = this.state + 1;
      if(newState > 1) newState = -1;

      var q = "dates."+this.dateString+"."+Meteor.userId()+".state";
      console.log(q+ " / "+this.state+" / "+newState);
      Meetings.update(meetingID, {$set:{q:newState}});

      return false;
    }
  })

我至少有两个具体问题:

1) 如何从点击事件中调用 state() 助手？ 2) 我的数据库更新似乎不起作用——它正在创建一个“q”文档，而不是使用存储在 q 中的字符串。

我确信这缺少对正确执行此操作的一些基本理解 - 请帮忙!

Answer 1

只是扩展@mark 的答案。您可能希望将 state 存储为一个 react 变量，以便您的 stateString 助手将在状态更改时更新。如果我理解正确的话，你实际上并没有尝试在你的模板中使用 state 助手 - 它只是字符串助手和事件所需要的。首先添加reactive-var包:

meteor add reactive-var

我建议为您的模板做这样的事情:

Template.day.created = function() {
  this.state = new ReactiveVar();
  this.autorun(_.bind(function() {
    var meetingDates = Meetings.findOne(meetingID).dates[this.data.dateString];
    var currentState = meetingDates[Meteor.userId()].state;
    this.state.set(currentState);
  }, this);
};

Template.day.helpers({
  stateString: function() {
    if (this.done) {
      return 'done';
    }
    switch(Template.instance().state.get()) {
      case -1: return 'unknown';
      case 0: return 'unavailable';
      case 1: return 'available';
    }
  }
});

Template.day.events({
  'click': function(event, template) {
    if (this.done) {
      return;
    }

    var newState = template.state.get() + 1;
    if (newState > 1) {
      newState = -1;
    }

    var modifier = {$set: {}}
    modifier.$set['dates.'+this.dateString+'.'+Meteor.userId()+'.state'] = newState;

    Meetings.update(meetingID, modifier);
  }
});