Question

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

<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内容，其中target是输入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
    }
  }
});

在您的代码库中记录这些秘密的神奇咒语。乍一看，没有一个是显而易见的。

阅读MDN docs范围输入，mut helper的Ember文档和Ember支持的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未设置范围滑块值

2 个答案: