Question

我正在努力将rangelider实现为Ember组件。在大多数情况下，它一直运作良好。当我试图添加一些把手魔术时出现问题。特别是我想将左边的style属性绑定到组件中的值。车把如下图所示。

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

问题在于它没有从Component获取leftPercentage和rightPercentage，而是从组件所在的Controller中获取。根据我的理解，组件应该与控制器完全分离。看看Ember-Inspector，当我选择'show components'时它没有显示单滑块组件，这让我相信它在检测组件时遇到问题，这可以解释为什么绑定没有本地化到组件

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

提前致谢！

Answer 1

解决了！很明显，在实现我的组件时我并不够谨慎 - 解决方案是调用

this._super();

在初始化调用中。

Ember组件无法识别 - bind-attr流向控制器

1 个答案: