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

【问题标题】：Ember components without wrapping in .ember-view class?没有包装在 .ember-view 类中的 Ember 组件？
【发布时间】：2013-09-30 20:47:15
【问题描述】：

我正在尝试为轮播创建一个组件，但如果我使用 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>

你是怎么解决这个问题的？

组件是否不适合用于此目的？

【问题讨论】：

你能显示你的组件的代码吗？

标签： ember.js

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：