ember.js - 如何避免使用 Ember 变形？

Question

我正在遍历在 Controller 中定义的集合。

我正在使用基础轨道插件将其转变为轮播。

但是我的HTML被弄乱了，并且破坏了插件，因为它期望获得一定的输出。

<ul class="orbit-slides-container" data-orbit="" style="margin-left: -800%; width: 1000%; height: 217px;"><script id="metamorph-3-end" type="text/x-placeholder" data-orbit-slide="" style="width: 10%;"></script>
      <script id="metamorph-3-start" type="text/x-placeholder" class="" style="width: 10%;"></script><script id="metamorph-1-start" type="text/x-placeholder" style="width: 10%;" class=""></script>
        <li style="width: 10%;" class="">
          <script id="metamorph-4-start" type="text/x-placeholder"></script>true<script id="metamorph-4-end" type="text/x-placeholder"></script>
          <img src="source">
        </li>
      <script id="metamorph-1-end" type="text/x-placeholder" style="width: 10%;" class=""></script><script id="metamorph-2-start" type="text/x-placeholder" style="width: 10%;" class=""></script>
        <li style="width: 10%;" class="">
          <script id="metamorph-5-start" type="text/x-placeholder"></script>true<script id="metamorph-5-end" type="text/x-placeholder"></script>
          <img src="src">
        </li>
      <script id="metamorph-2-end" type="text/x-placeholder" style="width: 10%;" class=""></script><script id="metamorph-3-end" type="text/x-placeholder" style="width: 10%;" class="active"></script>
    <script id="metamorph-3-start" type="text/x-placeholder" data-orbit-slide="" style="width: 10%;"></script></ul>

如何避免HTML混乱？基本上删除所有变态的东西。

Answer 1

您可以对 View 执行自定义渲染，从而避免使用变形。

Here is a blog讨论 Ember 中 View 的自定义渲染。 (这有些过时，但是自定义渲染的核心部分是相关的)

如果在 View 上定义render方法，则将push参数中的buffer内容存储在DOM中。

Discourse.HotnessView = Discourse.View.extend({
  classNames: ['hotness-control'],

  render: function(buffer) {
    for (var i=1; i<12; i++) {
      buffer.push("<button value='" + i + "'");
      if (this.get('hotness') === i) {
        buffer.push(" class='selected'");
      }
      buffer.push(">" + i + "</button>");
    }
  }
});