I have an ember.js app on fiddle, http://jsfiddle.net/yBtbu/7/
HTML
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="widgets">
Widgets
<ul>
{{#each item in model.sites itemController="site"}}
<li>
{{view Ember.Checkbox checkedBinding="isSelected"}}
{{item.desc}}
</li>
{{/each}}
</ul>
<ul>
{{#each item in model.grades itemController="grade"}}
<li>
{{view Ember.Checkbox checkedBinding="isSelected"}}
{{item.desc}}
</li>
{{/each}}
</ul>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
</body>
JavascriptCode
SITES = [
{ id: 0, desc: "abc" },
{ id: 1, desc: "def" }
];
GRADES = [
{ id: 1, desc: "first" },
{ id: 2, desc: "second" }
];
App = Ember.Application.create();
App.Site = Ember.Object.extend({});
App.Grade = Ember.Object.extend({});
App.Router.map(function () {
// put your routes here
this.resource('widgets', { path: 'widgets' }, function () {
this.resource('sites', { path: 'sites/:site_id' }, function () {
this.resource('grades', { path: 'grades/:grade_id' });
});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function () {
this.transitionTo('widgets');
}
});
App.WidgetsRoute = Ember.Route.extend({
model: function (params) {
var sites = Ember.A();
SITES.forEach(function (item) {
sites.pushObject(App.Site.create(item));
});
var grades = Ember.A();
grades.pushObject(App.Grade.create({ id: -1, desc: "all" }));
return Ember.Deferred.promise(function (p) {
p.resolve({
sites: sites,
grades: grades
});
});
}
});
App.WidgetsController = Ember.ObjectController.extend({
selectedSites: [],
selectedGrades: [],
subsequentFilters: function () {
//!!! why this is trigged when the application initially loads
try {
console.log("check a site");
} catch (e) { }
var selected = this.get('model').sites.filterProperty("isSelected", true);
//this.transitionToRoute("sites", selected.getEach("id"));
if (selected.length > 0) {
try {
console.log("go to sites");
} catch (e) { }
this.transitionToRoute("sites", selected.getEach("id"));
} else {
var grades = Ember.A();
grades.pushObject(App.Grade.create({ id: -1, desc: "all" }));
this.set("model.grades", grades);
this.transitionToRoute("widgets");
}
}.observes('model.sites.@each.isSelected'),
grades: function () {
var grades = Ember.A();
GRADES.forEach(function (item) {
grades.pushObject(App.Grade.create(item));
});
this.set("model.grades", grades);
}.observes('selectedSites')
});
App.SiteController = Ember.ObjectController.extend({
needs: ['widgets'],
isSelected: function (key, value) {
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
return model.get('isSelected');
} else {
// property being used as a setter
model.set('isSelected', value);
return value;
}
try {
console.log("update isSelected");
} catch (e) { }
}.property('model.isSelected')
});
App.GradeController = Ember.ObjectController.extend({
needs: ['widgets'],
isSelected: function (key, value) {
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
return model.get('isSelected');
} else {
// property being used as a setter
model.set('isSelected', value);
var widgetsController = this.get('controllers.widgets');
var selectedGrades = widgetsController.get('selectedGrades');
selectedGrades.pushObject(model);
////model.save();
return value;
}
try {
console.log("come on");
} catch (e) { }
}.property('model.isSelected')
});
App.SitesRoute = Ember.Route.extend({
model: function (params) {
var selectedSites = params.site_id.split(',');
return selectedSites;
},
setupController: function (controller, model) {
this.controllerFor('widgets').setProperties({ selectedSites: model })
},
serialize: function (model) {
return { site_id: model.join(',') };
},
deserialize: function (model) {
}
});
The app basically have two lists, "sites" list and "grades" list. Based on the selection of "sites", the app should go back to the server and fetch data and re-render "grades" list - basically "sites" and "grades" are cascading filters.
When the app is initially loaded, it has url e.g. - index.html#/widgets After some selection of "sites", the url is - index.html#/widgets/sites/0,1 (Edited: add jsbin, http://jsbin.com/ovumod/1/, seems like it is easier to see how URL changed with JsBin instead of JsFiddle)
Everything looks nice up to this point, but when I copy the url, index.html#/widgets/sites/0,1, to a browser, how do I make sure sites with id 0 and 1 are checked and correct grades data is loaded according to the selected "sites" parameter??
Also, is the pattern even looks right to begin with? I am new to Ember.js, and the app is from inspiration of this stackoverflow post Any advice to construct an Ember app with multiple cascading "array/list" will be greatly appreciated! Thanks in advance!
