javascript - Ember 组件无法识别 - 绑定(bind)属性流向 Controller

Question

我正在致力于将 rangeslider 实现为 Ember 组件。在大多数情况下，它运行得很好。当我尝试添加一些 Handlebars 魔法时，问题就出现了。特别是，我想将 style 属性 left 绑定(bind)到组件中的一个值。 Handlebars 如下所示。

<div class="slider-connector" {{bind-attr style=leftPercentage}}>
    <div class="handle-container handle-container-lower">
        <div class="handle">

        </div>
        <div class="handle-label">
            <strong>Value:</strong>
            <span>10.00</span>
        </div>
    </div>
</div>

JS 是

App.SingleSliderComponent = Ember.Component.extend({
template: 'components/single-slider',
classNames: ['ember-slider'],
left: -5,
right: 5,
rangeStart: -10,
rangeEnd: 10,
leftPercentage: 'left: 0%;',
rightPercentage: 'left: 100%;',
init: function() {

},
didInsertElement: function() {

},
setLeftPercentage: function() {
    var val = (this.get('left') - this.get('rangeStart'))/(this.get('rangeEnd') - this.get('rangeStart'))*100;
    this.set('leftPercentage', 'left: ' + val + '%;');
},
setRightPercentage: function() {
    var val = (this.get('right') - this.get('rangeStart'))/(this.get('rangeEnd') - this.get('rangeStart'))*100;
    this.set('rightPercentage', 'left: ' + val + '%;');
},
});

该组件是通过

实现的

{{single-slider}}

问题是它不是从组件中获取 leftPercentage 和 rightPercentage ，而是从组件所在的 Controller 中获取。据我了解，组件应该与 Controller 完全分离。查看 Ember-Inspector，当我选择“显示组件”时，它不会显示单 slider 组件，这让我相信它在检测组件时遇到问题，这可以解释为什么绑定(bind)未本地化到组件.

我的组件位于 templates/components/single-slider.hbs 中，我的 js 位于 elements/single-slider.js 中(但这并不重要，因为所有内容都是串联的。

提前致谢!

Answer 1

解决了!显然我在实现我的组件时不够小心 - 解决方案是调用

this._super();

在 init 调用中。