Ember.js每周日歷導航

Question

我正在為我的應用程序構建一個簡單的每周日歷組件，而我正努力尋找一種創建周導航的方法。 這是我到目前為止的內容：

/week-view/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  firstDay: moment().startOf('week'),

  days: Ember.computed('firstDay', function() {
    let firstDay = this.get('firstDay').subtract(1, 'days');
    let week = [];
    for (var i = 1; i <= 7; i++) {
      var day = firstDay.add(1, 'days').format('MM-DD-YYYY');
      week.push(day);
    }
    return week;
  }),

  actions: {
    currentWeek() {
      this.set('firstDay', moment().startOf('week'));
    },
    previousWeek() {
      this.set('firstDay', moment().startOf('week').subtract(7, 'days'));
    },
    nextWeek() {
      this.set('firstDay', moment().startOf('week').add(7, 'days'));
    }
  }
});

/week-view/template.hbs

<button {{action "previousWeek"}}>previous</button>
<button {{action "currentWeek"}}>current week</button>
<button {{action "nextWeek"}}>next</button>
<ul>
  {{#each days as |day|}}
    <li>{{day}}</li>
  {{/each}}
</ul>

目前，它僅在當前一周的前一周和之后的一周導航。 非常感謝您對如何無限期地進行這項工作的任何想法。 提前致謝。

Answer 1

我認為您不應該在預修周數組時（在計算函數中）更改firstDay屬性。 它覆蓋了momentjs狀態。 在這種情況下，計算屬性應僅讀取firstDay屬性，而不影響對其的更改。

同樣，在上周和下周的操作中，您不必創建新的momentjs對象。 例如，您可以輕松地操作先前創建的firstDay屬性。

this.get('firstDay').subtract(7, 'days');

但是在這種情況下，momentjs的狀態已更改，但是emberjs沒有看到任何更改。 那是因為您的firstDay屬性並沒有真正改變（並且計算屬性設置為僅檢查firstDay ，它無法深入工作）。 實際上， firstDay屬性僅是對momentjs對象的引用，並且該對象已更改，而不是引用。 但是幸運的是，您可以通過這種方式手動強制emberjs重新加載基於任何屬性的所有計算屬性：

this.notifyPropertyChange('firstDay');

重構后的工作示例如下所示：

import Ember from 'ember';

export default Ember.Component.extend({
  selectedWeek: moment().startOf('week'),

  days: Ember.computed('selectedWeek', function() {
    let printDay = this.get('selectedWeek').clone();
    let week = [];
    for (var i = 1; i <= 7; i++) {
      week.push(printDay.format('MM-DD-YYYY'));
      printDay.add(1, 'days');
    }
    return week;
  }),

  actions: {
    currentWeek() {
      this.set('selectedWeek', moment().startOf('week'));
    },
    previousWeek() {
      this.get('selectedWeek').subtract(7, 'days');
      this.notifyPropertyChange('selectedWeek');
    },
    nextWeek() {
      this.get('selectedWeek').add(7, 'days');
      this.notifyPropertyChange('selectedWeek');
    }
  }
});