I'm trying to load two models in one route and am not having any luck figuring it out. One route to hold all information to dynamically create a form and the other model is the one in which it will push form submission data to. Here is some of what I have so far:
Router Map
App.Router.map(function() {
this.route('about');
this.route('plans');
this.resource('prices', function() {
this.resource('price', { path: '/:price_id' });
});
this.resource('apply', function() {
this.resource('getstarted');
this.resource('addresses');
this.resource('contacts');
this.resource('drivers');
this.resource('equipment');
this.resource('assign');
});
});
For the Route I have tried all three of the following
Option 1
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
form: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted")
});
},
data: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
});
},
});
}
});
Option 2
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
form: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted/")
});
},
data: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
});
}
});
}
});
SOLUTION Option 3 - as suggested by kingpin2k
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
form: EmberFire.Array.create({
ref: new Firebase("https://moveloaded-ember.firebaseio.com/apply/getstarted/")
}),
data: EmberFire.Array.create({
ref: new Firebase("https://logistek.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
})
});
}
});
FireBase json at getstarted
{
"_type" : "object",
"1" : {
"type" : "text",
"placeholder" : "Type it in here...",
"name" : "carrierName",
"caption" : "What's the name of your carrier?"
}
}
The form is created via recursing through the first model, putting the data into a component that generates the form. I've tried to access the emberFire arrays in the first model using all of the following:
{{model.form.type}}
{{form.type}}
{{#each form}}
{{type}}
{{/each}}
{{#each model.form}}
{{type}}
{{/each}}
{{#each}}
{{form.type}}
{{/each}}
But it is not working...
Any ideas?
Update 1:
The fix was using option 3 as suggested by kingpin2k
also, I had to make the following change to my GetstartedController:
from:
App.GetstartedController = Ember.ArrayController.extend
to:
App.GetstartedController = Ember.ObjectController.extend
Then accessing the form model was as simple as:
{{#each form}}
{{type}}
{{/each}}
looking at the firebase code it doesn't look like it exposes any promises (so Ember.RSVP.hash won't do you any good). That being said you'll essentially just create a hash with 2 fields and return that.
return Ember.Object.create({
form: EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted")
}),
data: EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
})
});