Ember.js 具有 HTML 输入范围的组件未正确设置值

Question

我有一个简单的 Ember 组件，它只包含一个输入范围滑块，如下所示：

<input
  type="range"
  value=500
  min=0
  max=500
>

最初呈现时，滑块的位置并未如您预期的那样设置到最后。设置在100左右。

Answer 1

解决办法是改变属性的顺序，设置max之后的值：

<input
  type="range"
  min=0
  max=500
  value=500
>

通常在 HTML 中，属性的顺序无关紧要。但是，在这种情况下，Ember 似乎将其转换为类似以下内容的内容：

let input = document.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('value', 500);
input.setAttribute('min', 0);
input.setAttribute('max', 500);

default max of an input is 100。在这种情况下，在设置 'max' 之前将 'value' 设置为 500 是无效的，因此它被设置为 100。

查看讨论 here。

Ember.js 具有 HTML 输入范围的组件未正确设置值

Ember.js component with HTML input range does not set value correctly

html

javascript

ember.js