我可以使用简单对象在车把中使用 select-2 标签吗？

Question

我有对象

let StatusDescriptions = {
            'A' : 'Available' ,
            'W' : 'Waitlisted' ,
            'C' : 'Closed'
};

在页面中可用。我使用把手来显示页面。我可以在 select-2 标签中使用这个对象吗？我尝试将 optionValuePath 设置为 'key' 'id' 等，我知道这很愚蠢。我也是 Ember 的新手。请帮忙。

{{select-2 id="myID" content=StatusDescriptions optionLabelPath="what should be here" placeholder='Choose Status' searchEnabled=false}}

Answer 1

更新：如果您已经安装了 Select 2 Ember 插件...（如果没有，请参阅下面的说明）

您的对象应如下所示：

statusDescriptions: [
  {
    id: 'A',
    text: 'Available'
  },
  {
    id: 'W',
    text: 'Waitlisted'
  },
  {
    id: 'C',
    text: 'Closed'
  }
]

所以你可以把这个放在你的车把上：

{{select-2
    content=statusDescriptions
    id=id
    value=selectedChoice
    searchEnabled=false
}}

在您的车把或控制器中，您可以观察或使用计算属性 selectedChoice 属性。（这可能在您的车把文件中:)

Selected: {{selectedChoice.id}} - {{selectedChoice.text}}

Update2：如果你真的想使用一个简单的对象，你可以用计算属性转换它。例如，这可能在您的控制器中：

import Ember from 'ember';

export default Ember.Controller.extend({

  statusDescriptions: {
                        'A' : 'Available',
                        'W' : 'Waitlisted',
                        'C' : 'Closed'
                      },

  statusForSelect: Ember.computed('statusDescriptions', function() {
    const statusDescriptions = this.get('statusDescriptions');

    return Object.keys(statusDescriptions).map(key =>
      Object.create({id: key, text: statusDescriptions[key]})
    );
  })

});

因此在您的模板中，您可以将 statusForSelect 用作 content。

{{select-2
    content=statusForSelect
    id=id
    value=selectedChoice
    searchEnabled=false
}}

如果您还没有安装 Select 2 插件：

是的，您可以在 Ember 项目中使用 Select 2，但您必须安装特定的 Ember 插件。大多数您最喜欢的 javascript 库已经移植到 Ember，您可以在这里查看：http://www.emberobserver.com

您可以在这里找到关于 Select 插件的列表：https://www.emberobserver.com/categories/select

如您所见，有一个 ember-select-2 插件。在您的项目文件夹中运行:

ember install ember-select-2

如果您想使用此包，请按照说明操作：https://github.com/iStefo/ember-select-2

但是，还有更多最新的 select 软件包，您可以尝试一下。其中最受欢迎的是：http://www.ember-power-select.com/

我可以使用简单对象在车把中使用 select-2 标签吗？

Can I use select-2 tag in handlebars using a simple object?

handlebars.js

ember.js

ember-select

select2