Ember.js Can'；t向余烬添加布局。选择

我正在尝试创建一个自定义CSS下拉列表，它要求我向Select视图添加一个包装器类。我试图通过重新打开Ember.Select来添加代码，但该行为未按预期工作

在我的JS中，我定义了以下内容：

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

但是，我得到的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>

红色
黄色的
蓝色

我为此设置了一个JSFIDLE，可以在这里找到：

---

如果有什么诀窍，请告诉我。

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

    classNames: ['select-layout']

---

视图已出，零部件已入：

只需定义模板，在这种情况下无需屈服：

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

{{查看“选择”内容=内容}

---

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

不幸的是，这只会将类添加到Select元素中。我需要用东西包起来。谢谢你的回答。这可能行得通，但我不想创建一个全新的组件，而是想了解如何将布局添加到内置视图中。看起来很简单，对吧？我也在余烬2.0场景中落后了，所以也许你有一点我遗漏了：）这里发生了一些事情。请参见“选择”视图的“标记名”为“选择”，这意味着余烬将其渲染为包含标记，甚至不在手柄中。因此，您可以将标记名重新打开到div，但随后会丢失所有其他假定位于标记级别的属性绑定。我向您保证，我给您的组件示例将是最“余烬方式”。纯粹出于学术目的，如果您需要视图来执行此操作，您可以这样做

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