ember.js - Concurrent states with Ember.router -

i'd implement statechart in ember.js v1.5.x using ember.router, have problems concurrency , history mechanism.

basically when activate summary route/state i'd transition no changes made , transient state in same time. how can achieve this?

p.s. know e.g. stativus have these capabilities don't know how use ember.js routing. example bee good.

(image source: ian horrocks: constructing user interface statecharts p.153).

:)

yeah statecharts lovely , all, ember affords sub-states through computed properties.

i'm not overly familiar state charts, , i'd need consume resources (horrocks) mentioned here (https://github.com/emberjs/ember.js/issues/4767#issuecomment-41458710) before i'd conversant in nomenclature of particular example (which can if you'd like).

to end, , having said that, please take answer grain of salt, because may not understand context. hope help.

so in ember have routes. routes explain interface of application. these states. routes not actions, or events. provide url app present world.

so, state seems presenting students. have 2 sub-states in there... 0 students , >0 students. handle these same route (call studentsroute), because they're both same set of data, different substates of it. route have path called /students probably. @ point, you'd have controller gets fed model router (the list of students), end, controller extension of em.arraycontroller.

this array controller (auto-named studentscontroller, extends em.arraycontroller) automatically has 'model', , model, once resolved, students "array".

in studentscontroller, have computed property called zerocount represents state of 0 or not model. computed properties automatically stay date. that'd defined this:

app.studentscontroller = em.arraycontroller.extend({   zerocount: function() {   // zerocount true if zero, otherwise false     return this.get('model.length') == 0;   }.property('model.length'); }); 

in students template, conditionally render 1 of 2 sub-templates depending on zerocount state... you'd this:

{{#if zerocount}}   {{partial "nostudents"}} {{else}}   {{partial "somestudents"}} {{/if}} 

mind you, example, that'd overkill... don't need render other templates (partials) that.. there's easier simpler way because common pattern in ember (rendering list, , optionally rendering else if there no items in it, without needing zerocount property).

{{#each model}}   <p>this renders against each student... <br>   if students have property called name, <br>   write {{name}} , it'd render   students name</p> {{else}}   <p>this renders when there no students</p> {{/each}} 

you'd put delete link on each of items... , live bound properties handle states you... (thus, when model has 0 items in it, template goes else block of each... otherwise goes main block).

the delete action, handled delete inside #each model template (handlebars) directive goes controller , looks action inside of called, unsurprisingly, delete... , that'd this:

app.studentscontroller = em.arraycontroller.extend({   actions: {     delete: function(itemtodelete) {       itemtodelete.delete();       // assuming model "class" understands delete     }   } }); 

the edit state have own route... possibly nested route on students, called edit, possibly not depending on if wanted list appear on screen while edit page appears...

the "changes made" state handled not on route, on model... should be... model responsible persisting object graph, or telling view , controller whether or not model has changed (ember data, example, afford isdirty state on each model instance can tell whether has changed or not)...

hopefully whets appetite. recommend going through of examples on ember site... help, , following ember todomvc app if haven't checked out...

ember thrives on these kind of flow-based state driven uis... check out tom , yehuda's keynote @ confreaks if haven't already... talk flows in same way you're talking these states , sub-states.

hope helps.