Цвет кнопки не меняется при перезагрузке - PullRequest
Новая
       4

Цвет кнопки не меняется при перезагрузке

0 голосов
/ 07 мая 2020

По умолчанию кнопка текущей даты (первая кнопка) должна отображаться синим цветом. При нажатии другие кнопки должны иметь серый цвет, а текущая кнопка - синий цвет.

Работает впервые при рендеринге и после перезагрузки цвет кнопки не работает. 

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}}

Спасибо!

1 Ответ

0 голосов
/ 15 мая 2020

Вы должны использовать реактивную переменную (ReactiveVar, см. Документацию здесь ) для хранения currentDay вместо Session. ReactiveVar намного мощнее и надежнее, чем Session, особенно потому, что вы создаете их в функции onCreated экземпляра Template.

Я советую вам заменить любое использование Session на 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 class) и используйте оператор {{#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"
}

Я не тестировал образцы кодов, не не стесняйтесь комментировать, если вам нужна дополнительная информация

...