簡體   English   中英

Knockout bindingHandler用於逗號分隔的數字

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM