ember.js - Ember components: how to add a didInsertElement hook -

ember.js - Ember components: how to add a didInsertElement hook -

i trying create first ember component, wrapper chordsjs display guitar chords.

my component template looks this:

<chord {{bind-attr name=name positions=positions fingers=fingers size=size }}></chord>

and component js here:

import ember 'ember';

export default ember.component.extend({ name: 'd', positions: 'xx0232', fingers: '---132', size: '3', didinsertelement: function() { chords.replace(); } });

this renders correctly, since didinsertelement in component.js code, fires 1 time each element on page, if markup is

<chord></chord> <chord></chord>

there 4 rendered elements instead of two. there way include didinsertelement phone call fires 1 time per template?

edit: approach me hack chordjs library , create chords.replace() work single element: chords.replace(element). this, need way access dom element in component.js ?

i hacked around modifying chordjs library include function render 1 element instead of of <chord></chord> elements.

var replaceoneelement = function(elem) { var name = $(elem).find('chord').attr('name') var positions = $(elem).find('chord').attr('positions') var fingers = $(elem).find('chord').attr('fingers') var size = $(elem).find('chord').attr('size') var chord = chordboximage(name, positions, fingers, size); var canvas = $('<canvas></canvas>').attr({width:chord.getwidth(), height:chord.getheight()}).insertafter(elem); var ctx = canvas[0].getcontext('2d'); chord.draw(ctx); }

and calling in component 1 time per element:

didinsertelement: function() { chords.replaceone(this.get('element')); }

i still know if there more emberesque way of approaching this.

ember.js