Question

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

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

这有效;也就是说，我可以使用滑块并查看绑定值更改，按下按钮将保持服务器的任何值。

我现在要做的是删除“设置”按钮，并从滑块本身继续 mouseup ，我更愿意这样做与Ember相反，比如直接的jQuery钩子。到目前为止，我使用Ember搜索滑块的情况基本上没有变化。

我有什么想法可以做到这一点？提前谢谢！

后续编辑

根据贾斯汀的回答，我能够做到以下几点：

App.InputRangeComponent = Em.TextField.extend({
  type: 'range',

  action: 'mouseUp',

  mouseUp: function () {
    var value = this.get('value');
    this.sendAction('action', value);
  }
});

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

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

我命名的动作在鼠标向上调用并传递滑块的当前值，全部按预期方式进行。再次感谢Justin的回答！

Answer 1

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

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

（请注意：我对Ember仍然相当新，所以如果我说的话没有意义，那可能是我，不是你）

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

看看Ember docs on the {{input}} helper。当您使用type =“text”时，Ember正在创建Ember.TextField的实例。你有几个选择：

您可以重新打开Ember.TextField并向其添加mouseup事件。
您可以使用扩展Ember.TextField的新视图（您创建的）创建自己的新助手。

我推荐＃2的原因相当明显（你可能不希望你在mouseup上做的每一个文本都做同样的事情）。

SO，选项2。

我认为这就是它会失败的方式。如果没有，希望它至少会指向正确的方向，或者有人会纠正我。

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

var rangeSlider = Ember.TextField.extend({

});

您应该在此处添加mouseup事件：

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

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

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

然后您只需使用{{rangeSlider}}来插入该视图。

我不是百分之百确定如何通过新帮助程序添加属性。

查看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);
  }
});

现在我想到了，我想知道是否有办法扩展现有的助手......不确定。我在API中没有看到任何内容。

无论如何，希望这会指出你正确的方向。可能有一种更简单的方法，但这是我在阅读你的问题时首先突然出现的问题。：）

在Ember.js中处理Slider上的MouseUp

1 个答案: