如何使用模型数据填充 Ember.Select？答案

【问题标题】：How to Populate Ember.Select with Model Data?如何使用模型数据填充 Ember.Select？
【发布时间】：2014-12-13 01:18:34
【问题描述】：

我已经阅读了很多关于 Ember.Selects 的其他 SO 问题，但没有足够的内容可以工作。我有下拉列表来过滤返回数据中的某些字段。实际的过滤是另一个问题，我现在只是想填充下拉菜单。

根据docs，我使用在我的控制器上声明的静态数组，但我真正想要的是用数据中的唯一值填充下拉列表，这样我就不必维护选项数组。

我认为我需要的只是将选择的content 属性设置为模型中的字段，但只是将content=field 或contentBinding=field 设置为无效。

对此的任何建议或最佳实践将不胜感激。

【问题讨论】：

标签： ember.js dropdownbox ember.select

【解决方案1】：

选择视图的content 想成为array of strings 或array of objects。

如果您希望能够控制哪些属性用作选择和值，则对象数组效果最好。

{{view Ember.Select
        prompt="Select Something"
        content=modelProperty
        optionLabelPath="content.labelProperty"
        optionValuePath="content.valueProperty"
        value=boundValue
  }}

here is a working example

【讨论】：

【解决方案2】：

这是一个工作代码 sn-p：

App = Em.Application.create({
  displayName: 'Some.App'
});


App.Person = DS.Model.extend({
  name: DS.attr('string')
});

// this is testing data that should come from your backend api
App.Person.FIXTURES = [
  {id: 1, name: 'John Oliver' },
  {id: 2, name: 'Jon Stewart' },
  {id: 3, name: 'Cenk Uygur' }
];

// in real life, you'll be using another type of adapter, likely DS.RESTAdapter
App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.IndexRoute = Em.Route.extend({
  model: function(params) { 
     return this.store.find('person');
  } 
});

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Le Select" />
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
  
  <script type="text/x-handlebars">
    <h1>{{unbound App.displayName}}</h1>
    <hr />
    {{outlet}} 
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <h3>Index</h3> 
    Le Person: {{view Ember.Select prompt='- Select -' content=controller.model optionValuePath='content.id' optionLabelPath="content.name"}}
  </script>

</body>
</html>

【讨论】：

这很接近，所以谢谢你，它可以提取每个值，但如果有多个同名记录，您的选择包含所有重复项。如何获得唯一值？
如果您的后端 API 返回具有相同“文本”但 ID 不同的选择框的记录，则您必须清理数据。如果您的后端 API 返回重复记录（包括 id），则最后一个重复的剩余和上一个被删除。还是需要做数据清洗。如果您无法控制后端 API，您可能希望在 Route#setupController 中处理此问题，以便在将模型设置为 controller.model 属性之前过滤并删除重复记录。 select 组件，恕我直言，不应该处理这种类型的事情，因为它是数据问题而不是显示
“Ember 的全局查找。从 Handlebars 模板中选择已弃用。”