javascript - 如何删除奇怪的 Ember.js 视图边距

Question

另一个 Ember 问题：当我开始编写 Ember 应用程序时，我注意到 Ember 在应用程序周围创建了奇怪的、看似不可移动的边距，这使我的 Twitter Bootstrap 网格无法运行。我不太明白如何摆脱这些边距，以及如何使列再次工作。这是一张图片，向您展示我的意思：

相关HTML：

<script type="text/x-handlebars" id="tasks">
  <div class="well row-fluid span8 offset2 task-list">
    <div class="space-top"><div>
    <div class="accordion" id="accordion">
      {{partial 'tasks/newTask'}}
      {{#each task in controller}}
        <div class="accordion-group">
          {{render 'task' task}}
        </div>
      {{/each}}
    </div>
  </div>
</script>

更新：

这是一个不起作用的 JSFiddle，但所有代码都在那里：http: //jsfiddle.net/SL7s8/

Answer 1

Ember 本身不会将任何样式应用于您的应用程序，但正如您从屏幕截图中看到的那样，ember 视图（默认情况下）呈现在<div class="ember-view">. 可能是那个 div 正在影响你的利润。如果是这种情况，您可以按如下方式对其进行自定义：

App.TasksView = Ember.View.extend({
  templateName: "tasks",
  classNames: ["well", "row-fluid", "span8", "offset2", "task-list"]
});

然后更改您的模板以删除外部 div：

<script type="text/x-handlebars" id="tasks">
<div class="space-top"></div>
<div class="accordion" id="accordion">
  {{partial 'tasks/newTask'}}
  {{#each task in controller}}
    <div class="accordion-group">
      {{render 'task' task}}
    </div>
  {{/each}}
</div>
</script>

更新：修复损坏<div class="space-top"><div>以正确关闭</div>标签