Question

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

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

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

对此的任何建议或最佳做法都将非常感激。

Answer 1

这是一个有效的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

选择视图的

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

如何填充Ember.Select与模型数据？

2 个答案: