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}}}。你会失去绑定值。

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

2 个答案: