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 状态。 Computed 属性在这种情况下应该只读取 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');
    }
  }
});

Ember.js周历导航

Ember.js weekly calendar navigation

javascript

ember.js

calendar

ember-cli