Modifying value of observable values in observableArray

Question

I have an array containing 7 days (week) and a currentDate. When the currentDate goes below the lowest value of the week array, I want to change the dates of every element in the array and shift them by 1 week.

This is the code I have. The subscribe works fine, but the shifting of 1 week doesn't seem to work at all. What am I doing wrong?

Fiddle here: https://jsfiddle.net/rhsr0m9L/

function CalDay(date, total) {
  var self = this;
  this.date = ko.observable(date);
  this.total = ko.observable(total);
  this.dateFormatted = ko.computed(function() {
    return this.date().format('ddd Do');
  }, this);
}

var TimesheetViewModel = function() {
  var self = this;
  this.currentDate = ko.observable(moment().startOf('day'));
  this.week = ko.observableArray([]);

  self.currentDate.subscribe(function () {
    if (self.week()[0] != undefined) {
     if (self.currentDate() < self.week()[0].date()) {
      self.week().forEach(function(d) {
        console.log(d.date())
        d.date(d.date().add(-7, 'days'))
      })
     }
    }
  });

  // fill array to start
  [0,1,2,3,4,5,6].forEach(function(i) {
    self.week.push(new CalDay(self.currentDate().startOf('isoWeek').startOf('day').add(i, 'days'), i));
  });

jgasiorowski · Accepted Answer

Your ko view model is totally correct. You have only two issues with using momentjs library. Based on documentation moment object is mutable which means that when you initializing your week array you are really modifying currentDate each time and pushing its reference into week array (dates are shown correctly I believe because ko is caching views for performance reasons). Shat's why on start all your dates has grey background because all dates in you week are the same object instance. Then when you change your date it is just big mess because your forEach loop which adds -7 days does that on same moment object 7 times :) that's why you will get seven same days of week separated by week time gap.

Another issue is checking if date is before or equal. Based on documentation you should use .isBefore(..) or .isSame(..) methods instead of < or ==.

I updated your fiddle which should work as you expect https://jsfiddle.net/rhsr0m9L/1/

  function CalDay(date, total) {
    var self = this;
    this.date = ko.observable(date);
    this.total = ko.observable(total);
    this.dateFormatted = ko.computed(function() {
      return this.date().format('ddd Do');
    }, this);
  }

  var TimesheetViewModel = function() {
    var self = this;
    this.currentDate = ko.observable(moment().startOf('day'));
    this.week = ko.observableArray([]);

    this.incDay = function() {
      this.currentDate(moment(this.currentDate()).add(1, 'days'));
    };

    this.decDay = function() {
      this.currentDate(moment(this.currentDate()).add(-1, 'days'));
    };

    this.gotoToday = function() {
      this.currentDate(moment().startOf('day'));
    };

    this.isToday = ko.pureComputed(function() {
      return !this.currentDate().isSame(moment().startOf('day'));
    }, this);

    self.currentDate.subscribe(function() {
      if (self.week()[0] != undefined) {
        if (self.currentDate().isBefore(self.week()[0].date())) {
          self.week().forEach(function(d) {
            console.log(d.date())
            d.date(d.date().add(-7, 'days'))
          })
        }
      }
    });

    [0, 1, 2, 3, 4, 5, 6].forEach(function(i) {
      var temp = moment(self.currentDate());
      self.week.push(new CalDay(temp.startOf('isoWeek').startOf('day').add(i, 'days'), i));
    });
  };

  ko.applyBindings(new TimesheetViewModel());

body {
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.lightgray-back {
  background-color: lightgray;
}

#timesheets_list>tr>th {
  padding-left: 30px;
}

Modifying value of observable values in observableArray

Answers (1)

Related Questions