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週間前と、現在の週後に1をナビゲートするために働く瞬間。何週間も無制限にこの仕事をする方法についてのアイデアは大変ありがたいです。前もって感謝します。

Answer 1

私はあなたのfirstDayプロパティを変更してはいけないと思います。計算された関数のweek配列をprepairingしています。それは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'); 
    } 
    } 
});