EmberFire and nested arrays - ember.js

Question

I'm attempting my first ember-based project, as well as integrating emberfire into it to get Firebase capabilities. I'm building a tree menu builder, for another project.
The json for the firebase database is as follows:
{
"default" : {
"_type" : "arrayObject",
"name" : "unnamed",
"_name" : "default",
"menus" : {
"Top" : {
"menu" : {
"2" : {
"text" : "0-2",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 0,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : 0,
"a" : {
"_type" : "object"
},
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : 208,
"a" : {
"_type" : "object"
},
"r" : 208
},
"row" : 2,
"id" : 2
},
"5" : {
"text" : "0-5",
"actions" : [ {
"action" : 3
} ],
"column" : 0,
"color" : {
"b" : 0,
"g" : 0,
"a" : 255,
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : 208,
"g" : 208,
"a" : 255,
"r" : 208
},
"row" : 5,
"id" : 5
},
"12" : {
"text" : "1-3",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 3,
"id" : 12
},
"15" : {
"text" : "1-6",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 6,
"id" : 15
},
"8" : {
"text" : "0-8",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 0,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 8,
"id" : 8
},
"_type" : "objectArray",
"7" : {
"text" : "0-7",
"actions" : [ {
"action" : 3
} ],
"column" : 0,
"color" : {
"b" : 0,
"g" : 0,
"a" : 255,
"r" : 0
},
"_type" : "object",
"visibility" : "visible",
"page" : 0,
"bgColor" : {
"b" : 208,
"g" : 208,
"a" : 255,
"r" : 208
},
"row" : 7,
"id" : 7
},
"17" : {
"text" : "1-8",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 8,
"id" : 17
},
"1" : {
"text" : "0-1",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 0,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : 0,
"a" : {
"_type" : "object"
},
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : 208,
"a" : {
"_type" : "object"
},
"r" : 208
},
"row" : 1,
"id" : 1
},
"4" : {
"text" : "0-4",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3
}
},
"column" : 0,
"color" : {
"b" : 0,
"g" : 0,
"a" : 255,
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : 208,
"g" : 208,
"a" : 255,
"r" : 208
},
"row" : 4,
"id" : 4
},
"11" : {
"text" : "1-2",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 2,
"id" : 11
},
"14" : {
"text" : "1-5",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 5,
"id" : 14
},
"6" : {
"text" : "0-6",
"actions" : [ {
"action" : 3
} ],
"column" : 0,
"color" : {
"b" : 0,
"g" : 0,
"a" : 255,
"r" : 0
},
"_type" : "object",
"visibility" : "visible",
"page" : 0,
"bgColor" : {
"b" : 208,
"g" : 208,
"a" : 255,
"r" : 208
},
"row" : 6,
"id" : 6
},
"0" : {
"text" : "0-0",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 0,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : 208
},
"row" : 0,
"id" : "0"
},
"9" : {
"text" : "1-0",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 0,
"id" : 9
},
"16" : {
"text" : "1-7",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 7,
"id" : 16
},
"3" : {
"text" : "0-3",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 0,
"color" : {
"b" : 0,
"_type" : "objectArray",
"g" : 0,
"a" : {
"_type" : "object"
},
"r" : 0
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : 208,
"_type" : "objectArray",
"g" : 208,
"a" : {
"_type" : "object"
},
"r" : 208
},
"row" : 3,
"id" : 3
},
"10" : {
"text" : "1-1",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 1,
"id" : 10
},
"13" : {
"text" : "1-4",
"actions" : {
"_type" : "objectArray",
"0" : {
"action" : 3,
"_type" : "object"
}
},
"column" : 1,
"color" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"_type" : "object",
"visibility" : "hidden",
"page" : 0,
"bgColor" : {
"b" : {
"_type" : "object"
},
"_type" : "objectArray",
"g" : {
"_type" : "object"
},
"a" : {
"_type" : "object"
},
"r" : {
"_type" : "object"
}
},
"row" : 4,
"id" : 13
}
},
"_type" : "object"
},
"_type" : "objectArray"
},
"id" : "default"
},
"_type" : "objectArray",
"app2" : {
"_type" : "arrayObject",
"name" : "app2",
"_name" : "app2",
"menus" : {
"Top" : [ {
"text" : "0-0"
} ],
"_type" : "objectArray"
}
}
}
Anyhow, I've succeeded using a fork of emberFire that provides an emberFire object out of my initial array.(https://github.com/ember-meteor/emberFire/blob/refactor/emberfire-latest.js)
That works.
I have an embedded array that I turn into another emberFire ObjectArray, and
my code:https://github.com/jondthompson/menutest.
I used a similar behavior to the original ObjectArray creation to create a second one for the 'ssMenus' array nested within the 'ssApp', but it appears to not be populating with the proper data from Firebase, nor is the router even firing with an empty array.
The proper behavior would be when you click on an 'app', the name of the app appears at the bottom (works!), with the names of the menus appearing next to it (doesn't).
Anyhow, Help, please!

Answer 1

I figured it out.
I was writing the child firebase reference manually. I figured out how to do it via the original firebase object.
I wasn't encapsulating the child reference in a firebase object, but rather I was trying to inject it somewhere it didn't belong.
I was trying to create a second route, when I didn't need it.
I may have missed something else too. I consider myself a beginner programmer, so this is stretching my abilities.
My original AppController..
App.SsAppController = Ember.ObjectController.extend({
needs: ["selected_ssApp", 'ssMenus'],
selected: function(){
return this.get('controllers.selected_ssApp.model') === this.get('model');
}.property('controllers.selected_ssApp.model', 'model'),
actions: {
select: function(){
var model = this.get('model');
var menuList = this.get('controllers.ssMenus')
Ember.debug("MenuList: "+ menuList);
this.set('controllers.selected_ssApp.model', model);
menuList.set('ref', new Firebase("https://menutest.firebaseio.com/jt-test/"+model.content._name+"/menus"));
}
}
});
My new and improved (read: working) MenuController..
App.SsAppController = Ember.ObjectController.extend({
needs: ["selected_ssApp", 'ssMenus'],
menus: function(){
var model = this.get('model'),
ref = model.get('ref');
return EmberFire.ObjectArray.create({ ref: ref.child('menus')});
},
selected: function(){
return this.get('controllers.selected_ssApp.model') === this.get('model');
}.property('controllers.selected_ssApp.model', 'model'),
actions: {
select: function(){
var model = this.get('model'),
menusObj = model.get('menus');
this.set('controllers.selected_ssApp.model', model);
this.set('controllers.ssMenus.content', this.menus());
}
}
});