Ember.js 模态对话框的多个模型答案

【问题标题】：Ember.js Multiple Models for a Modal Dialog BoxEmber.js 模态对话框的多个模型
【发布时间】：2014-11-02 04:01:17
【问题描述】：

我是 Ember.js 的新手，我正在构建一个使用 Ember.js 和 Ember-Data 作为其前端技术的 Web 应用程序。我试图了解当您可能在页面上有多个使用独立模型的 ember 数据绑定组件时，最佳实践是什么。

这是我正在尝试做的事情：

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

（页面上有一个链接可以在 jsbin 这个要点中对其进行编辑。出于某种原因，我无法从虚 URL 中获取“共享”URL。）

我有一个这样的模板：

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

在此模板中，所有数据都正确绑定并出现在范围内。但是，当我尝试在其模式对话框中修改它时，只有 Quality 绑定到其 Ember.Select 视图。我试图用 controller.set 强制 IndexController 中的绑定，但它似乎没有工作。

我的 IndexController 如下所示：

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

JSBin 真正展示了我正在尝试做的事情：我想独立于同一个控制器加载/绑定每个下拉菜单。 JSBin 无法正常工作，因为我还不确定如何执行此操作。我将发布到 stackExchange 以查看是否有人可以修改此 JSBin 并向我展示我做错了什么，或者是否有人可以为我指出正确的方向，设计明智的如何解决这个问题？

（例如，我认为一种可能的解决方案是将下拉列表创建为组件，并通过其控制器加载数据或将其作为父控制器的属性传递，但我真的很想知道“The灰烬之路”）。

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

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

Ember.RSVP.hash 的文档曾经在这里：http://emberjs.com/api/classes/Ember.RSVP.html#method_hash。我不确定它为什么消失了。

目前，您可以在以下位置找到它：http://web.archive.org/web/20140718075313/http://emberjs.com/api/classes/Ember.RSVP.html#method_hash

【讨论】：