Question

我有一些余烬代码：

{{#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}}

我希望它有所帮助

灰烬组件不向右浮动

2 个答案: