Question

我正在使用Ember.js / Handlebars来循环收集一个集合。有一个ember的问题，用脚本变形包装它并在生成的输出中包含Div。

                <script type="text/x-handlebars">
                    {{#each App.PersonController}}
                      {{#view App.view contentBinding="this"}}
                         {{#with content}}
                         {{title}}
                        {{/with}}
                      {{/view}}
                    {{/each}}
                </script>

以下是它的样子：

 <div id="ember304" class="ember-view">
 <script id="metamorph-0-start" type="text/x-placeholder"></script>
 <script id="metamorph-2-start" type="text/x-placeholder"></script>
 <div id="ember511" class="ember-view" aria-hidden="false"> 
    <script id="metamorph-23-start" type="text/x-placeholder"></script> 
    <script id="metamorph-24-start" type="text/x-placeholder"></script>
         Mr
    <script id="metamorph-24-end" type="text/x-placeholder"></script>
    <script id="metamorph-23-end" type="text/x-placeholder"></script> 
</div>
</div>

我如何构造这个，以便ember使用更少的没有变形标签？这样我的CSS不会破坏？

Answer 1

尝试使用集合视图 http://emberjs.com/api/classes/Ember.CollectionView.html

您可以在不使用脚本标记的情况下迭代列表。

Answer 2

万一你还没有解决这个问题......

你对CSS有什么问题？

关于你提到的事情的一些一般性观点：

Metamorph标签：

Ember需要使用变形标记来支持绑定。也就是说，除了以下内容之外，它不应该影响任何CSS：first-child伪选择器。他们特别选择脚本标签，因为它们对布局的影响最小。

Ember divs：

您可以控制视图使用的标记，以及它使用的CSS类，如此

window.AppView = Em.View.extend({
    tagName: 'tr',
    classNames: ['cssClass']
});

希望这可以帮助你或其他人偶然发现这个问题（正如我所做的那样）。

如何构造以便Ember使用更少/没有变形标签？

2 个答案: