Question

我想显示可用候选人名单作为下拉列表，所以我使用Ember.Select：

{{view "select" content=candidatos optionValuePath="content.id" 
  optionLabelPath="content.nombre" prompt="Seleciona un candidato..." 
  selection=selectedCandidato}}

“candidato”的一个例子有这样的结构：

{id: ..., nombre: ..., confirmado: ...}

然后，这里有一个额外的要求：“如果确认为真，则在候选人名称旁边显示*。”

所以... optionLabelPath =“content.nombre”不再适用于此。我也不想污染模型（通过在candidato类中为此要求创建计算属性）。

目前我是通过在控制器中创建一个“markedCandidatos”列表来实现的，该列表是从原始候选人列表构建的。像这样：

{{view "select" content=candidatoMarkeds optionValuePath="content.id" 
  optionLabelPath="content.nombreMarked" prompt="Seleciona un candidato..." 
  selection=selectedCandidatoMarked}}

但它非常笨拙，因为我需要跟踪控制器中selectedCandidatoMarked的变化，并在原始候选人列表中查找，找到匹配的一个，并设置控制器的“selectedCandidato”属性与该匹配宾语。我不喜欢它，对于像这样的简单要求，代码太多了。

所以，我正在寻找一种自定义Ember.Select的方法。我特别需要一种方法来自定义select中每个选项的呈现方式。

坦率地说，此页面不符合：http://emberjs.com/api/classes/Ember.Select.html。我一直在谷歌搜索，没有找到一个直截了当的解释。

我真的很感激这里的一些帮助。

谢谢，拉嘎

更新：保持可能相关的链接：

Answer 1

我也不想污染模型（通过在此类要求中在candidato类中创建计算属性）。

这听起来是你最好的选择。请记住，你实际上并没有将这个新属性保存到数据库或类似的东西，所以它真的不是那么大的交易，恕我直言。

Answer 2

创建一个扩展Ember.Select的自定义视图，并为其指定optionView。将格式化逻辑放在与该optionView关联的模板中。您可能需要注册绑定的帮助程序（车把）：

自定义选择：

import Ember from 'ember';

export default Ember.Select.extend({
  optionView: Ember.SelectOption.extend({
    templateName: 'views/candidato-option'
  })
});

optionView模板：

{{candidato-marked view.content}}

帮助者：

Ember.Handlebars.registerBoundHelper('candidato-marked', function(candidato) {
  if (candidato == undefined) return undefined;
  return candidato.nombre + (candidato.confirmado? ' (*)' : '');
});

我正在使用Ember-CLI btw。

自定义Ember选择选项标签

2 个答案: