按钮颜色在重新加载时没有改变

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，see the docs here）来存储currentDay而不是Session。 ReactiveVar比Session更加强大和可靠，特别是因为您是在Template实例的onCreated函数上创建它们的。

我建议您将ResessionVar的所有使用都替换为ReactiveVar。

这里是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);
});
[此外，基于此，您应该将外部css与包含颜色的css类一起使用（即.active类），并使用{{#if}}语句将该类设置为要激活的html元素（<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"
}
我还没有测试示例代码，如果您需要更多详细信息，请随时进行评论