1

我想将可用候选人列表显示为下拉列表，因此我使用 Ember.Select：

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

“candidato”的一个实例具有以下结构：

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

然后，这里有一个附加要求：“如果confirmado 为真，则在候选人姓名旁边显示*”。

所以... optionLabelPath="content.nombre" 不再适用于此。我也不想污染模型（通过在候选类中创建一个计算属性来满足这个要求）。

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

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

但这很笨拙，因为我需要跟踪控制器中 selectedCandidatoMarked 的变化，并在原始候选列表中查找，找到匹配的，并使用该匹配对象设置控制器的“selectedCandidato”属性。我不喜欢这样的简单需求，代码太多。

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

坦率地说，这个页面不足：http ://emberjs.com/api/classes/Ember.Select.html 。我一直在谷歌搜索，还没有找到一个简单的解释。

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

谢谢，拉卡

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

  1. Ember.Select 带有未绑定的选项列表
  2. http://spin.atomicobject.com/2013/12/02/emberjs-abstraction/
4

2 回答 2

0

创建一个扩展 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 顺便说一句。
于 2015-02-16T16:26:05.510 回答
0

我也不想污染模型（通过在候选类中创建一个计算属性来满足这个要求）。

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

于 2015-02-16T14:34:16.313 回答