Load two emberFire models in one ember.js route

Question

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}}

score 0 · Accepted Answer · answered Jan 10 '14 at 05:25

0

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/")
        })
 });

answered Jan 10 '14 at 05:25

Kingpin2k

47,277
10
78
96

I've tried it this way, but was unable to access the EmberFire arrays... I've tried all of the following: `{{model.form.type}}` , `{{form.type}}` , `{{#each form}}{{type}}{{/each}}` , and `{{#each model.form}}{{type}}{{/each}}` – OgdenIT Jan 10 '14 at 13:38
Can you set up a dummy example at emberjs.jsbin.com and I'll gladly look into it. – Kingpin2k Jan 10 '14 at 16:57
1

Thank you so much for asking me to create a jsbin!!!! During the process of creating you a stripped down example version of my application the freaking thing worked with your solution. The problem was in my controller for that route... It was still trying to access data as if it was still a regular model instead of the new model object that was created. The fix was a matter of changing ```App.GetstartedController = Ember.ArrayController.extend``` to ```App.GetstartedController = Ember.ObjectController.extend``` – OgdenIT Jan 11 '14 at 01:02
Now the new problem... How would you go about creating an action in the controller to sumbit data from that form to data inside the model object? This doesn't work ```actions: { addCarrier: function() { this.pushObject(this.get("data.carrierName")); } }``` – OgdenIT Jan 11 '14 at 02:11
create an action and send in the source, did you finish up the jsbin, even with a stubbed out version I can show you. – Kingpin2k Jan 11 '14 at 02:13
`addCarrier: function(to) { to.pushObject(this.get("data.carrierName")); }` then in the template pass in the source `{{ action addCarrier data}}` or `{{ action addCarrier form}}` – Kingpin2k Jan 11 '14 at 02:15
I decided not to save it because the problem was solved... I'll create another one real quick. – OgdenIT Jan 11 '14 at 02:17
You're going to have a rough time getting the data out of the components, let me see if I can setup some way of doing it http://emberjs.jsbin.com/itURuroT/4/edit – Kingpin2k Jan 11 '14 at 04:17
The problem is, the components are intentionally out of scope of the template, so you can't access data from them, you can have them communicate with you, so we can have it send the data to you, though it's a little weird to expect a field to exist from a dynamic list of fields. http://emberjs.jsbin.com/itURuroT/4/edit – Kingpin2k Jan 11 '14 at 04:30
It was an experiment. The idea was to reduce the amount of code to be written in the long run. This will be a form wizard with 10+ sections. – OgdenIT Jan 11 '14 at 15:32
Your solution creates the new child object in firebase. Now I just have to figure out how to save the unique id of that new object that was created and pass it along to the next controller. That way more data could be added to the same carrier. – OgdenIT Jan 11 '14 at 15:39

Load two emberFire models in one ember.js route

1 Answers1