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中输入类型。

我想写一个Ember-Component，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

如何创建一个Ember-Component，它将成为文本框，单选按钮或下拉输入;根据数据的类型？

1 个答案: