如何創建將成爲文本框或單選按鈕或下拉式輸入的Ember-Component;基於數據的類型？

Question

我有稱爲properties作爲對象的示例清單：

{ 
    "properties": 
    [ 
    {"type": "STRING", "validation": "^https?", "id": "9", "name": "Download URL"}, 
    {"type": "DATE", "validation": "2015-01-01 to 2015-02-01", "id": "10", "name": "Next Upgrade"}, 
    {"type": "INTEGER", "validation": "1..10", "id": "11", "name": "Number Of Installs"}, 
    {"type": "BOOLEAN", "validation": "True/False", "id": "12", "name": "Admin Access"} 
    {"type": "ENUM", "validation": "Basic | Premium | Enterprise | Ultimate ", "id": "13", "name": "Product Edition"} 
    ] 
} 

陣列控制器目前被用來顯示在模板的所有這些特性。

現在我想創建一個表單，我希望接受所有這些屬性作爲輸入。 基於屬性的類型，我想要在Emberjs中輸入類型。

我想寫灰燼組分，這將成爲textbox爲STRING，INTEGER和DATE類型，3-way radio-button爲BOOLEAN型（空，真或假）和dropdown爲ENUM類型。

Answer 1

定義自己Ember.Component不Ember.View

這裏工作示例：

//sample route 
App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return [ 
    {"type": "STRING", "validation": "^https?", "id": "9", "name": "Download URL"}, 
    {"type": "DATE", "validation": "2015-01-01 to 2015-02-01", "id": "10", "name": "Next Upgrade"}, 
    {"type": "INTEGER", "validation": "1..10", "id": "11", "name": "Number Of Installs"}, 
    {"type": "BOOLEAN", "validation": "True/False", "id": "11", "name": "Admin Access"} 
    ]; 
    } 
}); 

App.MyInputComponent = Ember.Component.extend({ 
    tagName: 'input', 
    attributeBindings: ['customType:type'], 
    willInsertElement: function(){ 
    this.set('customType', this.get('content.type')); 
    } 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    {{#each item in controller}} 
     {{my-input content=item}} 
    {{/each}} 
    </script> 

工作JSBin