如何创建将成为文本框、单选按钮或下拉输入的 Ember 组件；基于数据的类型？

Posted 2023-02-23

【中文标题】如何创建将成为文本框、单选按钮或下拉输入的 Ember 组件；基于数据的类型？

【英文标题】：how to create an Ember-Component which will become either textbox, or radio-button, or dropdown input; based on the type of the data?

【发布时间】：2014-05-21 03:50:20

【问题描述】：

我有一个名为 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 组件，它将成为 textbox 用于 STRING、INTEGER 和 DATE 类型，3-way radio-button 用于 BOOLEAN 类型（空、真或假）和 @ 987654329@ 为ENUM 类型。

【参考方案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

【讨论】：

谢谢，我明白你在那里做了什么。这里的问题是，我希望为property 处理另一种类型，称为ENUM。请你看看我更新的问题，让我知道你的想法吗？ （注意：ENUM 应该用下拉列表而不是文本框表示，BOOLEAN 也应该用radio-button 或checkbox 表示，而不是inputbox）。