无法向 Ember.Select 添加布局

Question

我正在尝试创建自定义 CSS 下拉菜单，这需要我向 Select 视图添加包装器 class。我试图通过重新打开 Ember.Select 来添加代码，但该行为未按预期工作。

在我的 JS 中，我定义了这个：

Ember.Select.reopen({
  layout: Ember.Handlebars.compile("<div class='select-layout'>{{yield}}</div>") 
});

在我的模板中，我有：

{{view "select" content=model}}

然而，我的结果 HTML 是：

<select id="ember257" class="ember-view ember-select">
  <option id="ember270" class="ember-view" value="red">red</option>
  <option id="ember273" class="ember-view" value="yellow">yellow</option>
  <option id="ember276" class="ember-view" value="blue">blue</option>  
</select>

我为此设置了一个 JSFiddle，可以在这里找到： http://jsfiddle.net/rbn6qa9x/

如果有什么技巧，请赐教

Answer 1

如果您不需要额外的 div，您可以使用类名属性:

    classNames: ['select-layout']

Answer 2

视图已出，组件已入：

http://emberjs.jsbin.com/ciwifajaze/1/

只需定义您的模板，在这种情况下不需要 yield:

<script type="text/x-handlebars" data-template-name="components/custom-select">
    <div class='select-layout'>{{view "select" content=content}}</div>
</script>

因为你没有做任何需要 JS 的事情，你可以只使用 ember 会在幕后自动为你创建的组件对象。

无法向 Ember.Select 添加布局

Can't add a layout to Ember.Select

ember.js