![](/img/trans.png)
[英]Knockout bindingHandler for comma separated numbers with same entry again in a textbox
[英]Knockout bindingHandler for comma separated numbers
我正在KnockoutJS中構建一個數量非常繁重的應用程序,我希望能夠格式化大數字,以便它們以逗號分隔並且很好看(xxx,xxx)。
正如您將從下面的小提琴中看到的那樣,我確實通過使用簡單的RegEx將綁定值包裝在格式化函數內部,但問題是這會覆蓋輸入中的值並將','插入到潛在價值。
大數據在應用程序的下方使用,因此為了防止NaN錯誤,我必須將數據屬性分配給包含沒有','的值的輸入值,這是存儲在sessionStorage中的值。
我覺得我不知不覺地膨脹了我的HTML標記,並相信我想要實現的是一個bindingHandler,但我的綁定處理程序並不完全存在。
小提琴: http : //jsfiddle.net/36sD9/2
formatLargeNumber = function (number) {
if (typeof (number) === 'function') {
return number().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}
ko.bindingHandlers.largeNumber = {
init: function(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
var interceptor = ko.computed({
read: function() {
return formatLargeNumber(value);
},
write: function(newValue) {
value(reverseFormat(newValue));
}
});
if(element.tagName == 'input' )
ko.applyBindingsToNode(element, {
value: interceptor
});
else
ko.applyBindingsToNode(element, {
text: interceptor
});
}
}
有任何想法嗎?
您當前的方法存在多個問題:
element.tagName
返回INPUT等,因此在進行比較時需要注意外殼。
var value = ko.unwrap(valueAccessor());
你正在展開你的observable,所以在你的計算中你正在使用它的值,而不是函數本身。 所以你只需要var value = valueAccessor();
你需要在你的計算read
方法中調用ko.unwrap
。
您不僅需要格式化,而且需要在write
方法中“ formatLargeNumber
格式化”,但formatLargeNumber
只執行格式化方向。
您已將value
和您的largeNumber
應用於相同的輸入,這使得兩個綁定相互干擾
不要自己編寫格式代碼只需使用已經這樣做的庫: http : //numeraljs.com/
所以這里是使用numeraljs修正的綁定版本:
ko.bindingHandlers.largeNumber = {
init: function(element, valueAccessor) {
var value = valueAccessor();
var interceptor = ko.computed({
read: function() {
return numeral(ko.unwrap(value)).format('0,0');
},
write: function(newValue) {
value(numeral().unformat(newValue));
value.valueHasMutated();
}
}).extend({notify: 'always'});
if(element.tagName.toLowerCase() == 'input' )
ko.applyBindingsToNode(element, {
value: interceptor
});
else
ko.applyBindingsToNode(element, {
text: interceptor
});
}
}
並像這樣使用它:
<input data-bind="largeNumber: testVal">
演示JSFiddle 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.