Question

我正在尝试创建我的第一个ember组件，ChordsJS的包装器来显示吉他和弦。

我的组件模板如下所示：

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

我的组件JS在这里：

从＆＃39; ember＆＃39;;

导入Ember

export default Ember.Component.extend({
  name: 'D',
  positions: 'xx0232',
  fingers: '---132',
  size: '3',
  didInsertElement: function() {
    chords.replace();
  }
});

这是正确呈现的，但由于didInsertElement位于component.js代码中，因此它会为页面上的每个元素触发一次，所以如果我的标记是

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

将有4个渲染元素而不是2个。还有另一种方法可以包含didInsertElement调用，以便每个模板只触发一次吗？

编辑：另一种方法是让我破解ChordJS库并使chords.replace()适用于单个元素：chords.replace(element)。为此，我需要一种方法来访问component.js中的dom元素？

Answer 1

我通过修改ChordJS库以包含此函数来仅渲染一个元素而不是所有<chord></chord>元素来解决这个问题。

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

我仍然想知道是否有更多的Emberesque方式接近这个。

Ember组件：如何添加didInsertElement钩子

1 个答案: