Ember.js 余烬组件：如何添加didInsertElement挂钩

我正在尝试创建我的第一个余烬组件，一个用于显示吉他和弦的包装器

我的组件模板如下所示：

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

这会正确呈现，但由于

didInsertElement

位于component.js代码中，因此它会为页面上的每个元素触发一次，因此如果我的标记是

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

将有4个渲染元素，而不是两个。是否有其他方法包括

didInsertElement

调用，以便每个模板只触发一次

---

编辑：另一种方法是对ChordJS库进行黑客攻击，使

和弦.replace（）

可用于单个元素：

和弦.replace（元素）

。为此，我需要一种方法来访问component.js中的dom元素。

我通过修改ChordJS库来包含此函数，以仅呈现一个元素，而不是所有的

元素

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);
}

我仍然想知道是否有一种更为独特的方法来解决这个问题

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);
}

didInsertElement: function() {
    chords.replaceOne(this.get('element'));
}