Ember组件不是向右浮动的

Question

我有一些ember代码：

{{#each this}}
    <div class="item">
      <div class="right floated tiny blue ui label">{{status}}</div>
      <div class="content">
        <div class="header"><a>{{id}} - {{name}}</a></div>
        <small>last updated {{pretty-date lastUpdated}}, currently assigned to {{title-case owner.name}}</small>
      </div>
    </div>
 {{/each}}

这很好用。我的状态显示在右侧，项目id和名称显示在左侧。

我想对状态做一些额外的事情，所以我将它移到一个组件中。

{{#each this}}
    <div class="item">
    {{labeled-stat status=status}}
      <div class="content">
        <div class="header"><a>{{id}} - {{name}}</a></div>
        <small>last updated {{pretty-date lastUpdated}}, currently assigned to {{title-case owner.name}}</small>
      </div>
    </div>
 {{/each}}

然后是我的component.hbs

<div class="right floated tiny blue ui label">{{status}}</div>

当这个显示出来的时候，我会得到一个额外的div来表示状态

<div class="ember408">

这导致我的项目不能正确显示。因为ember添加了一个新的div，所以我的状态实际上是在左边。

有没有办法在不改变css的情况下解决这个问题？

Answer 1

看起来我需要将css从hbs组件文件移到模板中：

{{labeled-stat status=status class="right floated tiny blue ui label"}}

Answer 2

您可以使用classNames属性更改生成的div的类名。这样，您就不需要在每次使用组件时都传递class。

模板：

<script type="text/x-handlebars" data-template-name="components/labeled-stat">
  {{status}}
</script> 

组件：

App.LabeledStatComponent = Ember.Component.extend({
  classNames: "right floated tiny blue ui label".w()
});

用法：

{{labeled-stat status=status}}

我希望它能帮上忙