Ember.js calendrier de navigation hebdomadaire

Question

Je construis un composant de calendrier hebdomadaire simple pour mon application et j'ai du mal à trouver un moyen de créer la navigation des semaines. Voici ce que j'ai jusqu'à présent:

/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> 

Au moment où il travaille pour naviguer une semaine avant et un après la seule semaine en cours. Toute idée sur la façon de faire ce travail pour un nombre illimité de semaines est grandement appréciée. Merci d'avance.

Answer 1

Je pense que vous ne devriez pas changer votre propriété firstDay pendant la préparation de la matrice de la semaine (dans la fonction calculée). Il remplace l'état momentjs. La propriété calculée dans ce cas devrait juste lire la propriété firstDay sans affecter les modifications.

De même, dans vos actions de la semaine précédente et de la semaine prochaine, vous n'avez pas besoin de créer de nouveaux objets momentjs. Vous pouvez facilement utiliser la propriété firstDay précédemment créée, par exemple.

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

Mais dans ce cas, l'état de momentjs ont changé, mais emberjs ne voit pas de changement. C'est parce que votre propriété firstDay n'a pas vraiment changé (et la propriété calculée est définie pour vérifier seulement firstDay, cela ne fonctionne pas profondément). En fait, la propriété firstDay est juste référence à l'objet momentjs, et cet objet a été changé, pas la référence. Mais heureusement, vous pouvez forcer manuellement emberjs à recharger les propriétés calculées sur la base des biens de cette façon:

this.notifyPropertyChange('firstDay'); 

donc peu refactorisé exemple de travail peut ressemble:

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'); 
    } 
    } 
});