如何使用模型數據填充Ember.Select？

我讀過很多其他有關Ember.Selects的SO問題，但沒有足夠的工作。我有下拉菜單來過濾返回的數據中的某些字段。實際的過濾是另一個問題，我只是試圖讓目前填充的下拉列表。如何使用模型數據填充Ember.Select？

根據docs我的控制器上聲明的靜態數組的工作，但我真正想要的是使用數據中的唯一值填充下拉列表，因此我不必維護選項數組。

我認爲我需要的是將選擇的content屬性設置爲模型中的某個字段的方法，但只是將content=field或contentBinding=field尚未運行。

對此的任何建議或最佳做法將不勝感激。

2014-10-17 redOctober13

這裏的工作代碼片段：

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>

來源

2014-10-17 13:53:15 MilkyWayJoe

這已經很接近，所以，謝謝你，工作拉的每一個值，但如果有多個記錄具有相同的名稱，您的選擇包含所有重複項。如何獲得獨特的價值？ – redOctober13 2014-10-21 16:15:46

如果您的後端API返回具有相同「文本」但ID不同的選擇框的記錄，則必須清理數據。如果您的後端API正在返回重複的記錄（包括id），那麼最後一次重複的記錄將被保留，並且之前的記錄被取消。仍然需要做數據清理。如果您無法控制後端API，則可能需要在'Route＃setupController'中處理此操作，以便在將模型設置爲'controller.model'屬性之前過濾並刪除重複的記錄。「select」組件，恕我直言，不應該處理這種類型的事情，因爲它是一個數據問題而不是顯示 – MilkyWayJoe 2014-10-21 17:07:51

「從Handlebars模板的全局查找Ember.Select已被棄用。」 – 2015-06-06 17:31:10

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

來源

2014-10-17 13:41:18 Grapho

如何使用模型數據填充Ember.Select？

回答

相關問題