Ember和SVG：阵列控制器内容更改时不呈现视图

我正在使用余烬和SVG创建一个时间线。下面是我创建的JSFIDLE的链接（从原始代码简化）：

第一次呈现日历后，以及修改属性时（请参见init函数），都不会出现问题。但是，在设置事件集合时存在一些问题（错误：不受支持\u错误：引发DOM异常9）

当然，我可以使用d3来渲染这些矩形，但是我想利用Ember提供的绑定机制。该错误可能与Ember用于管理绑定的脚本标记有关

你知道仅使用Ember和SVG如何工作吗

谢谢

你是说：

App.eventsController.set('content', [Em.Object.create({ start: 50, end: 100 })]);

或者简单地说：

App.eventsController.clear().pushObject(Em.Object.create({ start: 25, end: 100 }));

---

SVG

在大多数情况下都有点严格，在大多数情况下需要

setAttributeNS

，需要所有文本节点，因此让模板引擎管理SVG内部的内容是很困难的

目前的一个解决方法是使用单独定位的

SVG

元素并进行如下重构：

App.EventView = Ember.View.extend({
    tagName: 'svg',
    templateName: 'event',
    ....
});

---

我在一个放弃的项目上做了类似的事情：

{{#each groups}}
  {{#view App.groupView groupBinding="this"}}
    <svg class="migration" height="568" width="1024">
      <g transform="translate(0,0)">
        {{countryMarkers}}
        <path {{bindAttr style="bezierStyle"}} {{bindAttr d="bezierPath"}} class="curve" />
      </g>
    </svg>
  {{/view}}
{{/each}}

{{#每个组}
{{{#view App.groupView groupBinding=“this”}
{{countryMarkers}}
{{/view}
{{/每个}}

---

我也很想知道是否有更好的解决方案，而无需解除绑定或手动模板。

SVG只要求链接使用SetAttributes，其他所有内容都可以使用setAttribute。另一方面，元素确实需要CreateElements。

App.EventView = Ember.View.extend({
    tagName: 'svg',
    templateName: 'event',
    ....
});

<script type="text/x-handlebars" id="event"><g><rect {{bindAttr x="view.x"}} {{bindAttr y="view.y"}} {{bindAttr width="view.width"}} {{bindAttr height="view.height"}}></rect></g></script>

svg.ember-view{position:absolute;top:10px;left:10px;}

{{#each groups}}
  {{#view App.groupView groupBinding="this"}}
    <svg class="migration" height="568" width="1024">
      <g transform="translate(0,0)">
        {{countryMarkers}}
        <path {{bindAttr style="bezierStyle"}} {{bindAttr d="bezierPath"}} class="curve" />
      </g>
    </svg>
  {{/view}}
{{/each}}