Как сделать компонент Ember с svg.js?

Question

Я работаю с угольком, и я видел компоненты, написанные, как это:

App.ExampleComponent = Ember.Component.extend({ 
    render: function (buffer) { 
     //Push strings to the buffer 
    } 
}); 

Однако, я надеюсь создать компонент уголек, который рисует на холсте с помощью svg.js, который может использовать только DOM. Итак, что я хотел бы сделать, это

App.ExampleComponent = Ember.Component.extend({ 
    render: function (element) { 
     var canvas = SVG(element); 
    } 
}); 

Есть ли способ сделать это с помощью Ember?

Примечание: Мне нужно svg.js, чтобы сохранить ссылки на элементы SVG, чтобы я мог их покрасить, не перерисовывая все изображение [это занимает много времени для рендеринга]. Я думаю, это запрещает мне просто привязывать элемент к буферу, но, возможно, не ...

Answer 1

Если вы хотите управлять деревом DOM только с помощью svg.js, вы должны избегать вызова Em.Component.render() при изменении свойств и вызывать только связанные с svg.js функции.

Я думаю, вы должны начать с чем-то вроде этого: http://jsbin.com/AfEQoQo/4/edit

Краткое объяснение: Во-первых, в пользовательской реализации Em.Component, вам необходимо подготовить простой шаблон и инициализировать svg.js в didInsertElement Ember .Component обратного вызова как-то вроде этого:

// Create simple wrapper template for svg.js content 
template: Em.Handlebars.compile('<div id="svg-wrapper"></div>'), 

didInsertElement: function() { 
    // Create and save the svg.js context for 
    // later manipulations 
    var draw = SVG('svg-wrapper'); 
    this.set('draw', draw); 
} 

После этого у вас svg.js контекст готов и может обрабатывать дальше с оказанием. Так давайте реализуем некоторые рисунок:

svgRender: function() { 
    // Manipulate your SVG dom tree here 
    var draw = this.get('draw'); 
    draw.rect(50,50).fill('#f09');  
} 

Теперь вы можете вызвать эту функцию либо из инициализации реализованы выше или вызвать его с помощью некоторых наблюдателей, как я в jsbin example. Надеюсь это поможет.