在Ember.js中處理滑塊上的MouseUp

我一直在將滑塊併入我正在處理的應用中的頁面。我的第一個嘗試是在我的模板中使用以下內容：在Ember.js中處理滑塊上的MouseUp

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

This works;也就是說，我可以使用滑塊並查看綁定值的更改，按下按鈕將保持服務器的任何值。

我想什麼現在要做的就是以刪除的「設置」按鈕，並堅持對鼠標鬆開從滑塊本身，我寧願與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"}}

我命名的操作在鼠標移動時被調用並按照預期傳遞滑塊的當前值。再次感謝賈斯丁的答案！

來源

2014-07-08 brad_julian

我的第一個想法，嚴格來說，這不是嚴格意義上的答案，但是另一種選擇可能就是保存改變的界限值，並限制它僅僅這樣做，比如每隔一次四分之一秒左右。現在

，作爲回答您的實際問題：

（請注意：我仍然是相當新的灰燼，所以，如果我說的話沒有任何意義，它可能是我，不是你）

我不知道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({ 

});

在這裏你應該添加您的鼠標鬆開事件：

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

現在，如果你不想使用{{視圖「App.RangeSlider」}}，您可以創建一個新的幫手：

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

然後，您只需使用{{rangeSlider}}插入該視圖。

雖然我並不是100％確定如何通過新幫手添加屬性。

望着ember.js代碼中，{{輸入}}助手曾在申報多一點去爲它：

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中沒有看到任何東西。

無論如何，希望這會指向你正確的方向。可能有一種更簡單的方法，但是當我閱讀你的問題時，這是我頭腦中首先遇到的問題。 :)

來源

2014-07-08 19:32:37

感謝您的回覆，@Justin。我認爲你可能是正確的使用自定義視圖...我希望能夠利用Ember已經有的東西（發現'type =「range」'對我來說也是一個快樂的事故），但我可能有超過這個範圍。 –

@brad_julian：如果您還沒有，請嘗試在irc.freenode.net上彈出#emberjs IRC頻道。就像這裏一樣，有人會回答，但有時候會有一些非常有知識的人。 :) –

在Ember.js中處理滑塊上的MouseUp

回答

相關問題