ember.js - 没有包装在 .ember-view 类中的 Ember 组件？

Question

我正在尝试为轮播创建一个组件，但是如果我使用 Ember 组件遍历 HTML，它会包装每张幻灯片，从而破坏 html 的结构。

它应该是：

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

但它变成了：

<div class="banner">
    <ul>
        <div class="ember-view">
            <li>This is a slide.</li>
        </div>
        <div class="ember-view"> 
            <li>This is another slide.</li>
        </div>
        <div class='ember-view'>
            <li>This is a final slide.</li>
        </div>
    </ul>
</div>

你如何解决这个问题？

使用组件是错误的吗？

Answer 1

修改组件的tagName：

App.CarouselSlideComponent = Ember.Component.extend({
  tagName: 'li'
});

用法：

<ul>
  {{#each slides}}
    {{#carousel-slide}}
      {{content}}
    {{/carousel-slide}}
  {{/each}}
</ul>

---

或者内联传递它：

<ul>
  {{#each slides}}
    {{#carousel-slide tagName="li"}}
      {{content}}
    {{/carousel-slide}}
  {{/each}}
</ul>

Answer 2

在您的模板中使用未绑定的 Handlebars 助手，如下所示{{{value}}}：但是，您将失去值绑定。