क्या मास्क किए गए इनपुट के साथ नॉकआउटजेएस का उपयोग करना संभव है?

Question

मैं कि प्लगइन का उपयोग कर: https://github.com/plentz/jquery-maskmoney मेरे पैसे संपादक फ़ॉर्मेट करने के लिए ...

मुझे लगता है कि संपादक में KnockoutJS उपयोग करने के लिए कोशिश की, लेकिन यह काम नहीं करता ... कि मुखौटा सब ठीक काम करता है बिना ...

मेरे कोड परीक्षण सरल है:

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

जावास्क्रिप्ट इनपुट मास्क को

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

और KnockoutJS

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

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

     ko.applyBindings(new ViewModel()); 

Answer 1

आपको एक लिखने योग्य गणना योग्य उपयोग का उपयोग करना चाहिए।

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

तुम भी नॉकआउट साथ MaskMoney के लिए एक बाध्यकारी हैंडलर रजिस्टर कर सकते हैं, कुछ की तरह:

$(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'); 
    } 
}; 

});

और फिर अपने बंधन के रूप में:

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

ध्यान दें कि मैं MaskMoney प्लगइन बदलाव थोड़ा input.on('focusout.maskMoney', blurEvent); बजाय input.bind('blur.maskMoney',blurEvent); उपयोग करने के लिए है क्योंकि यह केवल टैब पर माउस क्लिक करने के माध्यम से ध्यान केंद्रित खोने, पर एक अद्यतन ट्रिगर नहीं कर रहा था।

मैं नॉकआउट के लिए नया हूँ और बाध्यकारी हैंडलर दृष्टिकोण वास्तव में और इस तरह प्लगइन्स datepickers के लिए अच्छा लग रहा गया है, आदि

Answer 3

आप jquery.formatcurrency उपयोग कर रहे हैं आप कर सकता है:

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 }" />