Question

我正在尝试创建一个自定义CSS下拉列表，这需要我在Select视图中添加一个包装类。我试图通过重新打开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

视图已经完成，组件位于：

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

只需定义您的模板，在这种情况下无需收益：

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

由于您没有做任何需要JS的事情，您可以使用ember将在幕后自动为您创建的组件对象。

Answer 2

如果您不需要额外的div，则可以使用classNames属性：

    classNames: ['select-layout']

无法为Ember.Select添加布局

2 个答案: