dimanche 22 mars 2015

Reinitalize item-controller after route transition

I am trying to build a series of checkbox to check days of the week, but I can't figure out how to maintain proper presentation state when switching routes.


Since it keeps the previous state (controllers are singleton), I can't figure out what's the best way to reinitialize it every time I transition and also when I try to create a new instance of event.


The setup is the following (coffeescript notation):


an array controller defined as such:



ProjectEventsController = Ember.ArrayController.extend
itemController: 'project/event'


The item controller contains observers that watch changes on checkboxes



ProjectEventController = Ember.ObjectController.extend

mon:true
tue:true
wed:true
thu:true
fri:true
sat:true
sun:true

_days: []

eventId: undefined

eventObserver: (()->

if !@get('eventId')
@set 'eventId', @get('event.id')
@set '_days', @defaultDays

# if we have a recurrence days, we check the days that are already checked
# else we check them all
if @get('event.recurrence') and @get('event.recurrence.days')
console.log 'existing recurrence', @get('event.recurrence.days')
(@defaultDays.filter (day)=>
!@get('event.recurrence.days').contains day
).forEach (uncheckedDay)=>
console.log 'uncheckedDay', uncheckedDay
@set uncheckedDay.toLowerCase(), false

if (@get('event.recurrence') and @get('event.recurrence.days') == @defaultDays)
console.log 'all days checked', @get('event.recurrence.days'), @defaultDays
@set 'recurrenceEnabled', false
).observes('event.id')


_daysObserver: ((k,v)->
val = @get v
key = v.toUpperCase()
days = @get '_days'
if val
if !days.contains key
days.push key
else
days = days.filter (item)->
item != key

@set '_days', days
if @get 'event.recurrence'
@set 'event.recurrence.days', days.toArray()
else
@set 'event.recurrence', Ember.Object.create
type: 'weekly'
days: days
start_hhmm: @defaultHHmm
duration_seconds: @defaultDuration
).observes('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun')


The checkbox is then simple something like this:



<div>{{input checked=thu type="checkbox" disabled=recurrenceNotEnabled }} Thu</div>


I'd like to provide a JsBin, but I am not too sure about how to do it. If someone could provide a template, I could fill in the rest





Aucun commentaire:

Enregistrer un commentaire