重新加載時按鈕顏色不會改變

Question

默認情況下，當前日期按鈕（第一個按鈕）應顯示為藍色。 當它被點擊時，其他按鈕應該是灰色的，當前按鈕應該是藍色的。

它在渲染時第一次工作，並且在重新加載后按鈕的顏色不起作用。

Template.agendaPage.helpers({
    'getDateFilters': function() {
      var allDays = Session.get('allDays')
      allDays = allDays.map(function(val) {
        return moment(val).format("MMM DD")
      })
      return allDays;
    },
  })

  Template.agendaPage.events({
    'click .dateFilter': function(event) {
      var bgclr;
      var id = $(event.target).attr('data-index');
      var allDays = Session.get('allDays');
      Session.set('currentDay', allDays[id]);
      $('.dateFilter').css({
        "background-color": "#575757"
      });
      $(`.dateFilter[data-index=${id}]`).css({
        "background-color": "#0091FF"
      });
    },
  })

  Template.agendaPage.rendered = function() {
    var _this = this;
    Meteor.setTimeout(function() {
      var dayObj = {}
      var days = []
      var startDay = ''
      var eventId = Session.get('data-event-id');
      var orgId = Session.get('data-organisation-id');
      var sessions = Content.find({
        eventId: eventId,
        orgId: orgId
      }, {
        sort: {
          "sessionStartTime": 1
        }
      }).fetch();
      var eventData = Events.findOne({
        "eventId": eventId
      })
      sessions.forEach(function(content, index, sessionArray) {
        if (content.sessionStartTime) {
          var startime = content.sessionStartTime.toString()
          var dayformat = moment(startime).format("dddd, MMM DD YYYY")
          if (dayObj.hasOwnProperty(dayformat)) {
            dayObj[dayformat].push(content)
          } else {
            dayObj[dayformat] = []
            dayObj[dayformat].push(content)
          }
          if (!startDay) {
            startDay = dayformat
          }
          if (days.indexOf(dayformat) == -1) {
            days.push(dayformat)
          }
        }
      })
      Session.set('dayObj', dayObj)
      Session.set('allDays', days)
      Session.set('currentDay', startDay)
      Session.set("track", "all")
      Session.set("trackDes", "all")
      var allDates = Object.keys(Session.get('dayObj'))
      if (allDates.length == 1) {
        $('.next-day').attr('disabled', "")
      } **
      $('.dateFilter[data-index=0]').css({
        "background-color": "#0091FF"
      }); **
    }, 300)
    Meteor.setTimeout(function() {
      if ($('.eventBanner').length == 0) {
        $('.agedaTitle').css("margin-top", "100px")
      }
    }, 1000)
  }

{{#if getDateFilters}} 
  {{#each getDateFilters}}
    <button type="button" data-index="{{@index}}" class="btn btn-primary btn-sm dateFilter" style="border-radius: 12.5px;font-size: 12px;width: 99px;font-family: TTCommons-Regular;letter-spacing: 0px;font-weight: bold;height: 25px;background-color: #575757;line-height: 14px;float: left;margin-left: 20px;outline: none;border: none;">{{this}}</button>
  {{/each}} 
{{/if}}

謝謝！

Answer 1

您應該使用反應變量（ReactiveVar，請參閱此處的文檔）來存儲 currentDay 而不是 Session。 ReactiveVar 比 Session 更強大和更可靠，特別是因為您在模板實例的onCreated function 上創建它們。

我建議你用 ReactiveVar 替換所有使用 Session。

這是 currentDay 變量的代碼示例：

Template.agendaPage.events({
    'click .dateFilter': function(event) {
         var bgclr;
         var id = $(event.target).attr('data-index');
         var allDays = Session.get('allDays');
         Template.instance().currentDay.set(allDays[id]);
     });
});
Template.agendaPage.helpers({
    currentDay : function(){
        return Template.instance().currentDay.get()
    }
});


Template.agendaPage.onCreated(function(){
    this.currentDay = new ReactiveVar(null);
});

Also, based on this, you should use an external css with css classes containing your colors (ie .active class) and use {{#if}} statement to set the class to the html element that is getting activated ( <button> )

Template.agendaPage.helpers({
    isActive : function(element){
        let currentDay = Template.instance().currentDay.get()
        // do wathever logic you need based on the `element` variable passed as param
        return true; // or false
    }
});

<button class="{{#if (isActive this)}}active{{/if}}">

.active{
    "background-color": "#0091FF"
}

我還沒有測試示例代碼，如果您需要更多詳細信息，請隨時發表評論