svg - Ember 和 SVG : views not rendered when array controller content changes

Question

我正在使用 Ember 和 SVG 创建时间轴。下面是我创建的 jsfiddle 的链接(从原始代码简化而来):

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

第一次渲染日历和修改属性时都没有问题(请参阅 init 函数)。但是，当我设置事件集合时会出现一些问题(错误:NOT_SUPPORTED_ERR:抛出 DOM 异常 9)。

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

知道仅使用 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}}

我也很想听听是否有更好的解决方案，无需解除绑定(bind)或手动模板化。