在Ember.js中处理滑块上的鼠标

我一直在努力将一个滑块合并到我正在开发的应用程序的页面中。我的第一次尝试是在模板中使用以下内容：

<span class="value">{{scaledDistThreshold}}%</span>
{{input type="range" min="0" max="100" step="1" value=scaledDistThreshold}}
<button class="set" {{action "setDistThreshold"}}>Set</button>

然后，我可以在我的标记中使用此组件，如下所示：

{{input-range min="0" max="100" step="1" value=scaledDistThreshold action="setDistThreshold"}}

我命名的动作在鼠标向上移动时被调用，并沿着滑块的当前值传递，所有这些都是预期的。再次感谢贾斯汀的回答

我的第一个想法，严格来说，这并不是对你问题的回答，但另一个选择可能只是在更改时保存绑定值，并限制它仅这样做，比如说，每四分之一秒左右保存一次

现在，关于回答你的实际问题：

（请注意：我对余烬还是相当陌生的，所以如果我说的没有意义，那可能是我，而不是你）

我不知道type=“range”是{{input}助手的一个选项。每天学习新东西。：）

请看下面的图片。使用type=“text”时，Ember正在创建Ember.TextField的实例。您有两个选择：

您可以重新打开Ember.TextField并向其中添加鼠标悬停事件

您可以创建自己的新助手，该助手使用扩展Ember.TextField的新视图（您创建的视图）

我建议使用#2，原因很明显（你可能不希望你制作的每个文本字段在mouseup上都做同样的事情）

因此，选择2

我想这就是它的下场。如果没有，希望它至少能为你指明正确的方向，或者有人会纠正我

首先，您需要创建一个扩展Ember.TextEdit的新视图。让我们称之为“范围滑块”

以下是您应该添加鼠标悬停事件的位置：

App.RangeSlider = Ember.TextField.extend({
    mouseUp: function(){
        //Do stuff here
    } 
});

现在，如果您不想使用{{view“App.RangeSlider”}，可以创建一个新的帮助器：

Ember.Handlebars.helper('rangeSlider', App.RangeSlider);

然后只需使用{{RangeSloider}}插入该视图

不过，我不能100%确定如何通过新助手添加属性

查看ember.js代码，{{input}助手在声明中对它有更多的帮助：

Ember.Handlebars.registerHelper('input', function(options) {
  Ember.assert('You can only pass attributes to the `input` helper, not arguments', arguments.length < 2);

  var hash = options.hash,
      types = options.hashTypes,
      inputType = hash.type,
      onEvent = hash.on;

  delete hash.type;
  delete hash.on;

  if (inputType === 'checkbox') {
    Ember.assert("{{input type='checkbox'}} does not support setting `value=someBooleanValue`; you must use `checked=someBooleanValue` instead.", options.hashTypes.value !== 'ID');
    return Ember.Handlebars.helpers.view.call(this, Ember.Checkbox, options);
  } else {
    if (inputType) { hash.type = inputType; }
    hash.onEvent = onEvent || 'enter';
    return Ember.Handlebars.helpers.view.call(this, Ember.TextField, options);
  }
});

Ember.handlebar.registerHelper（'input'，函数（选项）{
assert（'您只能将属性传递给'input'助手，而不能传递参数'，arguments.length<2）；
var hash=options.hash，
types=options.hashTypes，
inputType=hash.type，
onEvent=hash.on；
删除hash.type；
删除hash.on；
如果（输入类型==='复选框'）{
assert（“{input type='checkbox'}}不支持设置`value=someBooleanValue`；您必须改用`checked=someBooleanValue`.”，options.hashTypes.value！=='ID'）；
返回Ember.handlebar.helpers.view.call（这个，Ember.Checkbox，选项）；
}否则{
如果（inputType）{hash.type=inputType；}
hash.onEvent=onEvent | |“回车”；
返回Ember.handlebar.helpers.view.call（this，Ember.TextField，options）；
}
});

现在我想起来了，我想知道是否有一种方法可以扩展现有的助手。。。不确定。我没有在API中看到任何东西

---

无论如何，希望这能为你指明正确的方向。也许有一个更简单的方法，但这是我读到你的问题时第一个想到的

谢谢你的回复，@Justin。我想你使用自定义视图可能是对的……我希望能够利用余烬已经拥有的东西（找到关于

type=“range”

对我来说也是一个愉快的意外），但我可能已经超出了这个范围。@brad_julian:如果你还没有，试着打开IRC.freenode.net上的#emberjs IRC频道。就像这里一样，有人是否会回复，这是一种碰运气的事，但那里不时会有一些相当有知识的人

Ember.Handlebars.helper('rangeSlider', App.RangeSlider);

Ember.Handlebars.registerHelper('input', function(options) {
  Ember.assert('You can only pass attributes to the `input` helper, not arguments', arguments.length < 2);

  var hash = options.hash,
      types = options.hashTypes,
      inputType = hash.type,
      onEvent = hash.on;

  delete hash.type;
  delete hash.on;

  if (inputType === 'checkbox') {
    Ember.assert("{{input type='checkbox'}} does not support setting `value=someBooleanValue`; you must use `checked=someBooleanValue` instead.", options.hashTypes.value !== 'ID');
    return Ember.Handlebars.helpers.view.call(this, Ember.Checkbox, options);
  } else {
    if (inputType) { hash.type = inputType; }
    hash.onEvent = onEvent || 'enter';
    return Ember.Handlebars.helpers.view.call(this, Ember.TextField, options);
  }
});