Javascript 根据集合的属性更改视图

我正在使用Ember.js构建一个日历应用程序，遇到了一些麻烦。

这是列模板的外观：

<script type='text/x-handlebars' data-template-name='instructor/lessons'>
  <div class='planning-column'>
    {{#each}}
      {{render 'lesson' this}}
    {{/each}}
  </div>
</script>

<script type='text/x-handlebars' data-template-name='lesson'>
  <div class='lesson' {{bind-attr style='style'}}>
    <div class='lesson-content'>
      <div class='lesson-time'>{{start_time}}</div>
      {{student}}
    </div>
  </div>
</script>

{{{#各}
{{呈现“课程”此}
{{/每个}}

这是课程模板的外观：

<script type='text/x-handlebars' data-template-name='instructor/lessons'>
  <div class='planning-column'>
    {{#each}}
      {{render 'lesson' this}}
    {{/each}}
  </div>
</script>

<script type='text/x-handlebars' data-template-name='lesson'>
  <div class='lesson' {{bind-attr style='style'}}>
    <div class='lesson-content'>
      <div class='lesson-time'>{{start_time}}</div>
      {{student}}
    </div>
  </div>
</script>

{{开始时间}
{{学生}

---

问题是：有些事件（课程）重叠。当一个事件与另一个事件重叠时，我想调整它的宽度，就像谷歌日历一样。我应该在哪里检测事件是否重叠？我应该为此创建App.LessonView吗？如何在这样的视图中迭代事件数组？我可能是看错了吗？

你所说的事件重叠是什么意思……你是说冒泡吗？？？在上一篇专栏文章中，有几个事件相互重叠。我希望它们并排放在同一列中。