Ember.js Multiple Models for a Modal Dialog Box

Question

I am new to Ember.js, and I am building a web application that is using Ember.js and Ember-Data for its front-end technology. I am trying to understand what would be the best practice for when you might have multiple ember-data bound components on a page that use an independent model.

Here is kind of what I'm trying to do:

https://gist.github.com/redrobot5050/6e775f4c5be221cd3c42

(There's a link on the page to editing it within jsbin this gist. For some reason, I can't get a 'Share' URL off the vanity URL.)

I have a template like so:

 <script type="text/x-handlebars" data-template-name="index">
  <p>Options for graphics quality: </p>
    <ul>
    {{#each item in model}}
      <li>{{item.setting}}</li>
    {{/each}}
    </ul>
    <p>Currently Selected: {{model.selectedValue}}</p>
    <p>Draw Distance Options:</p>
    <ul>
    {{#each item in dropdown}}
      <li>{{item.distance}}
    {{/each}}
    </ul>
    <p>Currently Selected Distance: {{selectedDistance}}
</p>
{{outlet}}
    <button {{action 'openModal' 'modal' model}}>Change Settings</button>
  </script>

In this template, all the data binds correctly and appears in scope. However, when I attempt to modify it within its modal dialog box, only Quality is bound to its Ember.Select view. I have attempted to force the binding in the IndexController with a controller.set but it does not appear to be working.

My IndexController looks like this:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var qualityList = this.store.find('quality');
    console.log('qualityList=' + qualityList);    
    return qualityList;
    //return App.Quality.FIXTURES;
  },
  setupController : function(controller, model) {
    controller.set('model', model);
    var drawDistanceList = this.store.find('drawDistance');
    console.log('distanceList=' + drawDistanceList );
    controller.set('dropdown', drawDistanceList);
    controller.set('selectedDistance', 1);
    //this.controllerFor('modal').set('dropdown', drawDistanceList );
  }
});

The JSBin really shows off what I am attempting to do: I want to load/bind each of the drop downs independently from the same controller. The JSBin does not work correctly because I'm not really sure how to do this, just yet. I am posting to stackExchange to see if someone can modify this JSBin and show me what I'm doing wrong, or if someone can point me in the right direction, design-wise on how to solve this problem?

(For example, I think a possible solution could be to create the dropdowns as components, and load the data through their controller or pass it in as properties from the parent controller, but I really want to know what is the "The Ember Way").

Gaurav Gaurav · Accepted Answer · 2014-09-09T03:10:47

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      qualityList: this.store.find('quality'),
      drawDistanceList: this.store.find('drawDistance')
    });
  },
  setupController: function(controller, model) {
    controller.set('model', model.qualityList);
    controller.set('dropdown', model.drawDistanceList);
  }
});

Documentation for Ember.RSVP.hash used to be here: http://emberjs.com/api/classes/Ember.RSVP.html#method_hash. I'm not sure why it has disappeared.

For the moment, you can find it at: http://web.archive.org/web/20140718075313/http://emberjs.com/api/classes/Ember.RSVP.html#method_hash

Ember.js Multiple Models for a Modal Dialog Box

1 Answers