3

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

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

第一次渲染日历以及修改属性时都没有问题（请参阅init函数）。但是，当我设置事件集合时存在一些问题（错误：NOT_SUPPORTED_ERR：DOM Exception 9 is throw）。

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

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

谢谢

4

1 回答 1

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

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

Did you mean:

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

or simply:

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 is kind of strict in most ways, needs setAttributeNS in most places, takes all textNodes, so making a template engine manage things inside SVG is hard.

One workaround for now will be to use separate positioned SVG elements and restructure like:

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/

I did something similar on a dropped project:

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

I would also love to hear if there is a better solution without unbinding or manual templating.

于 2012-09-19T01:26:49.683 回答