KnockOut货币绑定处理程序

Question

我试图创建一个bindingHandler来显示给定格式的钱空间。但是当我想要使用该值时，它必须再次浮动。

例如，我想要的是;

money = ko.observable(); 

考虑：

money(1500000.75);

显示：1.500.000,75

这样。

我用过;

ko.bindingHandlers.numericValue = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     ko.utils.registerEventHandler(element, 'change', function (event) { 
      var observable = valueAccessor(); 
      var positions = ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions; 

      if (ko.utils.unwrapObservable(allBindingsAccessor().positions) == 0) { 
       positions = 0; 
      } 

      if (isNaN(parseFloat($(element).val()))) 
       observable(0); 
      else { 
       if (!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints)) 
        observable(parseFloat($(element).val().replace(".", "").replace(",", ".")).toFixed(positions).replace(",", ".")); 
       else 
        observable(parseFloat($(element).val().replace(".", "").replace(",", ".")).toFixed(positions)); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     if (value != null) { 
      var positions = ko.utils.unwrapObservable(allBindingsAccessor().positions) || ko.bindingHandlers.numericValue.defaultPositions; 
      if (ko.utils.unwrapObservable(allBindingsAccessor().positions) == 0) { 
       positions = 0; 
      } 
      var formattedValue = parseFloat(value).toFixed(positions); 
      var finalFormatted = formattedValue; 
      if (!ko.utils.unwrapObservable(allBindingsAccessor().noDecimalPoints)) 
       finalFormatted = ko.bindingHandlers.numericValue.withCommas(formattedValue); 
      ko.bindingHandlers.value.update(element, function() { return finalFormatted; }); 
     } 
    }, 
    defaultPositions: 2, 
    noDecimalPoints: false, 
    withCommas: function (original) { 
     original += ''; 
     x = original.split('.'); 
     x1 = x[0]; 
     x2 = x.length > 1 ? ',' + x[1] : ''; 
     var rgx = /(\d+)(\d{3})/; 
     while (rgx.test(x1)) { 
      x1 = x1.replace(rgx, '$1' + '.' + '$2'); 
     } 
     return x1 + x2; 
    } 
}; 

作为绑定和

<input class="actTextBox" placeholder="" data-bind="numericValue: money"> 

为html。但是当我输入“1500000.43”时，我什么都看不到。我看到空白。

我找不到任何答案。

Answer 1

我使用maskmoney jquery插件和敲除自定义绑定。

ko.bindingHandlers.mask = { 

    init: function (element, valueAccessor, allBindingsAccessor) { 
     ko.bindingHandlers.mask.processar(element, valueAccessor, allBindingsAccessor); 
    }, 

    update: function (element, valueAccessor, allBindingsAccessor) { 
     var mask = valueAccessor(); 
     if (mask.tipo !== 'Currency') { 
      ko.bindingHandlers.mask.createMask(element, ko.bindingHandlers.mask.getObservable(mask.mascara)); 
     } 
    }, 

    getObservable: function (valor) { 
     if ($.isFunction(valor)) { 
      var res = valor(); 
      return $.isFunction(res) ? res() : res; 
     } else { 
      return valor; 
     } 
    }, 

    processar: function (element, valueAccessor, allBindingsAccessor) { 
     var mask = valueAccessor(); 
     var maxLeftDigits = mask.hasOwnProperty('maxLeftDigits') ? mask.maxLeftDigits : null; 
     var options = null; 
     if (maxLeftDigits !== null) { 
      options = { 
       maxLeftDigits: mask.maxLeftDigits 
      }; 
     } 

     switch (mask.tipo) { 
      case 'Currency': $(element).maskMoney(options, function (valor) { 
       if (mask.hasOwnProperty('value')) { 
        if (mask.value() !== null) { 
         mask.value(valor); 
        } 
       } 
      }); break; 
      default: 
       var mascara = ko.bindingHandlers.mask.getObservable(mask.mascara); 
       ko.bindingHandlers.mask.createMask(element, mascara); 
       break; 
     }; 
    } 

下载完整的源代码here

Answer 2

试试这个：

ko.bindingHandlers.currency = { 
     update: function(element, valueAccessor){ 
      // retrieve observable value 
      var value = ko.utils.unwrapObservable(valueAccessor()) || 0; 
      //convert to number of string 
      value = + value; 
      //format currency 
      var formattedText = "$" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"); 
      //apply formatted text to the underlying DOM element 
      $(element).text(formattedText); 
     } 
    };