knockout js y globalización

Question

No puedo entender cómo manejar los cálculos utilizando knockout js y una configuración no estadounidense. Mi coma está validada correctamente con el plugin jquery.globalization, pero el cálculo de knockout me proporciona un NaN. ¿Admite knockout js esto de alguna manera o existen soluciones temporales?

Ejemplo:

Hacer el ejemplo cartEditor en el knockout js sitio trabajo permitiendo valores decimales en el campo de cantidad y permitiendo la entrada globalizado (, como signo de coma) y la salida de formato

http://knockoutjs.com/examples/cartEditor.html

Necesito esto para trabajar en un sitio de asp.net mvc 3 porque estoy ejecutando el sitio utilizando la cultura nb-NO y el archivador modelo está esperando, como el signo de coma

Answer 1

Hice algo así escribiendo un enlace personalizado que envolvió autoNumeric.js para el formateo. (gist)

ko.bindingHandlers.autoNumeric = function ($) { 

    function getElementValue(el) { 
     return parseFloat(el.autoNumericGet(), 10); 
    } 

    function getModelValue(accessor) { 
     return parseFloat(ko.utils.unwrapObservable(accessor()), 10); 
    } 

    return { 
     init: function (el, valueAccessor, bindingsAccessor, viewModel) { 
      var $el = $(el), 
       bindings = bindingsAccessor(), 
       settings = bindings.settings, 
       value = valueAccessor(); 

      function updateModelValue() { 
       value(getElementValue($el)); 
      }; 

      $el.autoNumeric(settings); 
      $el.autoNumericSet(getModelValue(value), settings); 
      $el.change(updateModelValue); 
     }, 
     update: function (el, valueAccessor, bindingsAccessor, viewModel) { 
      var $el = $(el), 
       newValue = getModelValue(valueAccessor()), 
       elementValue = getElementValue($el), 
       valueHasChanged = (newValue != elementValue); 

      if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) { 
       valueHasChanged = true; 
      } 

      if (valueHasChanged) { 
       $el.autoNumericSet(newValue); 
       setTimeout(function() { $el.change() }, 0); 
      } 
     } 
    }; 
} 

el enlace de datos utilizando esta apariencia de unión personalizada Autonumérico como esto:

<input data-bind="autoNumeric:amount, settings:{aSign:'$'}" /> 

Echa un vistazo a autoNumeric.js amplias opciones para dar formato a ver lo que puede hacer ewith la configuración.

Answer 2

modificado para que sea compatible con la versión más reciente Autonumérico (1.9.x)

(function($) { 

    function getElementValue(el) { 
     return parseFloat(el.autoNumeric('get'), 10); 
    } 

    function getModelValue(accessor) { 
     return parseFloat(ko.utils.unwrapObservable(accessor()), 10); 
    } 

    ko.bindingHandlers.autoNumeric = { 
     init: function (el, valueAccessor, bindingsAccessor, viewModel) { 
      var $el = $(el), 
       bindings = bindingsAccessor(), 
       settings = bindings.settings, 
       value = valueAccessor(); 

      function updateModelValue() { 
       value(getElementValue($el)); 
      }; 

      if (settings.pSign === 's') { 
       settings.aSign = ' ' + settings.aSign; 
      } else { 
       settings.aSign = settings.aSign + ' '; 
      } 

      $el.autoNumeric(settings); 
      $el.autoNumeric('set', getModelValue(value)); 
      $el.change(updateModelValue); 
     }, 
     update: function (el, valueAccessor, bindingsAccessor, viewModel) { 
      var $el = $(el), 
       newValue = getModelValue(valueAccessor()), 
       elementValue = getElementValue($el), 
       valueHasChanged = (newValue != elementValue); 

      if ((newValue === 0) && (elementValue !== 0) && (elementValue !== "0")) { 
       valueHasChanged = true; 
      } 

      if (valueHasChanged) { 
       $el.autoNumeric('set', newValue); 
       setTimeout(function() { $el.change() }, 0); 
      } 
     } 
    }; 
})(jQuery);