簡體   English   中英

Meteor.js:如何從事件中調用helper方法?

[英]Meteor.js: how to call helper method from event?

我懷疑我不是以流星的方式做這件事。 我正在制作一個共享的互動日歷。

我有一個日歷模板:

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

使用返回day對象的幫助器:

     {
        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()從db獲取狀態,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)如何從click事件中調用state()幫助器? 2)我的數據庫更新似乎不起作用 - 它正在創建一個'q'文檔,而不是使用存儲在q中的字符串。

我確信這缺少一些基本的理解正確的方法 - 請幫助!

只是擴大@mark的答案。 您可能希望將state存儲為響應變量,以便狀態更改時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);
  }
});

從任何地方訪問模板助手:

Template.<name>.__helpers.get('<helper>').call()

在我的腦海中,在同一模板中的助手和事件之間保持數據的一種方法是將其存儲為模板實例中的屬性。 例如,您可能會看到如下所示的內容:

Template.day.created = function () {
  // here `this` refers to template instance
  this.state = -1;
};

Template.day.helpers({
  state: function () {
    var s = Meetings.findOne({"_id":meetingID}).dates[this.dateString];
    Template.instance().state = s;
    return s;
  },
  ...
});

Template.day.events({
  'click': function () {
    ...
    var state = Template.instance().state;
    ...
  }
});

至於q的問題,你必須先構造對象,否則q將被解釋為實際的字段名而不是變量(注意查詢中“q”和q之間沒有區別)。

var query = {};
query[q] = newState;
Meetings.update(meetingID, { $set: query });

希望這可以幫助!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM