Ember 未设置范围滑块值

Question

在表格中，在 table 中，我有...

<tr><td>Score (-10 to +10):</td><td>{{input type="range" min="-10" max="10" steps="1" value=game.score }}<br/>Score: {{game.score}}</td></tr>

这几乎有效；滑块下方会报告正确的值，并且使用滑块设置的任何值都会正确存储。但是滑块没有正确初始化值

更新：看起来这主要是因为负数而失败！

。如果我用常量（例如“7”）替换绑定名称，那么它会正确初始化。

这看起来像一个 Ember 错误，因为同样的格式适用于其他输入类型并且它确实正确地报告了它；这只是错误的初始化。但这似乎有点大错，所以一定有一些秘密的魔法咒语有经验的用户知道，我只是不知道。我该如何初始化它？

Answer 1

在 Ember 中处理范围滑块的最佳方法是使用本机 HTML 实现而不是输入助手。输入助手仅适用于文本和复选框。

选项 1：使用 mut 助手处理滑块变化：

<input type="range" 
    oninput={{action (mut game.score) value="target.value"}} 
    min={{min}} 
    max={{max}} 
    value={{game.score}} 
    steps="1">

在此示例中，当滑块移动时，oninput 触发。（只有在用户释放鼠标后才会触发 onchange）。然后，mut 助手将 game.score 的值更改为滑块的值。 target.value 是正常的 HTML 东西，其中目标是输入 dom 元素本身。

选项 2：使用 Ember 的内置事件处理程序

<input type="range" 
    min={{min}} 
    max={{max}} 
    value={{game.score}} 
    steps="1">

在你的组件js中，添加输入函数：

import Ember from 'ember';

export default Ember.Component.extend({
  input(event) {
    console.log(event.target.value)
  }
});

此处，event.target.value 包含滑块的值。使用事件侦听器（而不是显式操作）有点不常见，所以如果这让您感到惊讶，请阅读底部的链接。现在你有了这个值，你可以在组件内调用动作，设置一些东西，或者将它发送到控制器等。

选项 3：使用关闭操作

闭包操作（在模板中设置为事件名称的操作）将事件作为默认参数接收。

<input type="range" 
  oninput={{action 'sliderMoved'}} 
  min={{min}} 
  max={{max}} 
  value={{game.score}}
  steps="1">

在组件中：

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    sliderMoved(e) {
      console.log(e.target.value)
      // do something with the value
    }
  }
});

在您的代码库中记录这些秘密的魔法咒语。 None 乍一看很明显。

阅读 MDN docs on range inputs, the Ember docs for the mut helper, and Ember's supported event names 非常有帮助。

Answer 2

像这样的组件对我有用。

在components/range-slider/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: ['value', 'min', 'max', 'step', 'type'],
  type: 'range',
  value: 0.5,
  min: 0.0,
  max: 1.0,
  step: 0.1,
  input(event) {
    this.set('value', event.target.value);
  }
});

这样使用：

{{range-slider value=my_value min=0.0 max=0.5 step=0.001}}

看起来很好用，也很简单。

Ember 未设置范围滑块值

Ember not setting range slider value

ember.js

rangeslider