Czy można używać KnockoutJS z zamaskowanym wejściem?

Question

jestem za pomocą tej wtyczki: https://github.com/plentz/jquery-maskmoney sformatować mój edytor pieniędzy ...

Próbowałem użyć KnockoutJS w tym edytorze, ale to nie działa ... Bez tej masce wszystko działa prawidłowo ...

Mój testowy kod jest prosty:

<input id="Price" data-bind="value: Price" type="text" name="Price"> 

Javascript maskę wprowadzania

$("#Price").maskMoney({ symbol: 'R$ ', showSymbol: true, thousands: '.', decimal: ',', symbolStay: false }); 

And KnockoutJS

var ViewModel = function() { 
      this.Price = ko.observable(); 

      this.PriceFinal= ko.computed(function() { 
       return this.Price() 
      }, this); 
     }; 

     ko.applyBindings(new ViewModel()); 

Answer 1

Powinieneś używać zapisywalnych obliczalnych obserwowalnych.

function MyViewModel() { 
    this.price = ko.observable(25.99); 

    this.formattedPrice = ko.computed({ 
     read: function() { 
      return '$' + this.price().toFixed(2); 
     }, 
     write: function (value) { 
      // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable 
      value = parseFloat(value.replace(/[^\.\d]/g, "")); 
      this.price(isNaN(value) ? 0 : value); // Write to underlying storage 
     }, 
     owner: this 
    }); 
} 

ko.applyBindings(new MyViewModel()); 

Answer 2

Można również zarejestrować wiążącej obsługi dla MaskMoney z Knockout, coś jak:

$(document).ready(function() { 

ko.bindingHandlers.currencyMask = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = allBindingsAccessor().currencyMaskOptions || {}; 
     $(element).maskMoney(options); 

     ko.utils.registerEventHandler(element, 'focusout', function() { 
      var observable = valueAccessor(); 

      var numericVal = parseFloat($(element).val().replace(/[^\.\d]/g, '')); 
      numericVal = isNaN(numericVal) ? 0 : numericVal; 

      observable(numericVal); 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).unmaskMoney(); 
     }); 
    }, 

    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 

     $(element).val(value); 
     $(element).trigger('focus'); 
    } 
}; 

});

a następnie jako swój wiążący:

<input type="text" data-bind="currencyMask: MyModel.TotalCost, currencyMaskOptions: { symbol: '$', showSymbol: true, thousands: ',', precision: 0 }" /> 

pamiętać, że manipulowane wtyczki MaskMoney nieznacznie używać input.on('focusout.maskMoney', blurEvent); zamiast input.bind('blur.maskMoney',blurEvent); ponieważ nie było wyzwolenie aktualizacji na utratę ostrości poprzez kliknięcie myszki, tylko na tabulatorem.

Jestem nowy na nokaut i zostały znalezienia wiążącej podejście uchwytu naprawdę miły dla wtyczek takich jak ten i datepickers itp

Answer 3

Jeśli używasz jquery.formatcurrency można zrobić:

ko.bindingHandlers.currencyMask = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = allBindingsAccessor().currencyMaskOptions || {}; 
     $(element).formatCurrency(options); 
     $(element).keyup(function() { 
      $(element).formatCurrency(options); 
     }); 


     ko.utils.registerEventHandler(element, 'focusout', function() { 
      var observable = valueAccessor(); 
      observable($(element).val()); 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).formatCurrency('destroy'); 
     }); 
    }, 

    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 

     $(element).val(value); 
     $(element).trigger('focus'); 
    } 
}; 

<input data-bind="currencyMask: priceVal, currencyMaskOptions: { roundToDecimalPlace: 0 }" />