Ember和SVG：阵列控制器内容更改时未显示视图

Question

我正在使用Ember和SVG创建时间线。下面是一个的jsfiddle一个链接，我创建（从原来的代码简化）：

http://jsfiddle.net/karlguillotte/UgeFk/

有一次日历呈现的第一次，以及当我修改的属性没有问题（见init函数）。但是，在设置事件集合时有一些问题（错误：NOT_SUPPORTED_ERR：抛出DOM异常9）。

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

任何想法如何才能使用Ember和SVG工作？

感谢

Answer 1

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

{ start: 50, end: 100 } !== Em.Object.create({ start: 50, end: 100 }); 

你的意思是：

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

或者干脆：

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

---

App.eventsController.set('content', [{ start: 50, end: 100 }]);//will work 
//but you cannot use set/get etc on the object later as its a pure js object. 

SVG是最严格的一种，绝大多数地方需要setAttributeNS，所有文本节点，所以在SVG里面做模板引擎管理很难。现在

一种解决方法将是使用单独的定位SVG元件和重组等：

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;} 

http://jsfiddle.net/UgeFk/4/

http://jsfiddle.net/UgeFk/5/

我做了一个下降的项目类似的东西：

{{#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}} 

我也很想听听是否有不必解除或手动模板更好的解决方案。