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> 

그것을 전에 하나는 현재 주 후 1 주를 탐색하기 위해 노력 순간. 수 주 동안이 작업을 수행하는 방법에 대한 아이디어는 대단히 감사하겠습니다. 미리 감사드립니다.

Answer 1

주 배열 (계산 된 함수에서)을 prepairing하는 동안 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'); 
    } 
    } 
});