3

Ember と SVG を使用してタイムラインを作成しています。以下は、私が作成した jsfiddle へのリンクです (元のコードから単純化されています)。

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

カレンダーが初めてレンダリングされたとき、および属性を変更したときは問題ありません (init 関数を参照)。ただし、イベント コレクションを設定すると、いくつかの問題があります (エラー: NOT_SUPPORTED_ERR: DOM Exception 9 がスローされます)。

もちろん、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 });

もしかして：

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ほとんどの場所で必要であり、すべての textNode を使用するため、テンプレート エンジンで SVG 内のものを管理するのは困難です。

現時点での 1 つの回避策は、個別の配置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}}

また、バインドを解除したり、手動でテンプレートを作成したりせずに、より良い解決策があるかどうかも知りたいです。

于 2012-09-19T01:26:49.683 に答える