2014-10-17 2 views
0

Я читал много других вопросов о Ember.Selects, но ничего не достаточно, чтобы работать. У меня есть выпадающие списки для фильтрации определенных полей в моих возвращенных данных. Фактическая фильтрация - еще одна проблема, я просто пытаюсь получить раскрывающийся список, заполненный на данный момент.Как заполнить Ember.Select с данными модели?

Шахта работает со статическими массивами, объявленными на моем контроллере, в соответствии с docs, но я действительно хочу, чтобы выпадающий список заполнялся уникальными значениями из данных, поэтому мне не нужно поддерживать массив параметров.

Я думаю, что все, что мне нужно, это установить свойство select content в поле модели, но просто положить content=field или contentBinding=field не сработал.

Любые предложения или рекомендации по этому вопросу будут высоко оценены.

ответ

2

Вот рабочий фрагмент кода:

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>

+0

Это близко, так что спасибо, что работает, чтобы вытащить все значения, но если есть несколько записей которые имеют одинаковое имя, ваш выбор содержит все дубликаты. Как получить уникальные значения? – redOctober13

+1

Если ваш backend API возвращает записи для поля выбора с одинаковыми «текстовыми», но разными идентификаторами, вы должны очистить свои данные. Если ваш backend API возвращает повторяющиеся записи (включая id), то последние повторяющиеся остаются и предыдущие удаляются. Все еще нужно очищать данные. Если у вас нет контроля над API-интерфейсом, вы можете обработать его в «Route # setupController», чтобы вы фильтровали и удаляли повторяющиеся записи, прежде чем устанавливать модель в свойство 'controller.model'. Компонент 'select', IMHO, не должен заниматься этим типом вещей, поскольку он относится к данным, а не отображает – MilkyWayJoe

+0

« Глобальный поиск Ember.Select из шаблона Handelbars устарел ». –

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