Có thể sử dụng KnockoutJS với đầu vào được đeo mặt nạ không?

Question

tôi đang sử dụng plugin: https://github.com/plentz/jquery-maskmoney để định dạng biên tập tiền của tôi ...

Tôi cố gắng để sử dụng KnockoutJS trong trình soạn thảo đó, nhưng nó không hoạt động ... Nếu không có mặt nạ rằng tất cả hoạt động tốt ...

kiểm tra mã của tôi rất đơn giản:

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

Javascript để Mask đầu vào

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

Và KnockoutJS

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

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

     ko.applyBindings(new ViewModel()); 

Answer 1

Bạn nên sử dụng tính toán có thể ghi được.

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

Bạn cũng có thể đăng ký một handler ràng buộc cho MaskMoney với Knockout, một cái gì đó như:

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

});

và sau đó là ràng buộc của bạn:

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

Lưu ý rằng tôi tinh chỉnh plugin MaskMoney hơi để sử dụng chứ không phải là input.on('focusout.maskMoney', blurEvent);input.bind('blur.maskMoney',blurEvent); vì nó không được kích hoạt cập nhật về mất tập trung thông qua nhấp chuột, chỉ có trên tabbing.

Tôi mới để loại trực tiếp và đã được tìm ra phương pháp xử lý ràng buộc thật sự tốt đẹp cho các plugins như thế này và datepickers vv

Answer 3

Nếu bạn đang sử dụng jquery.formatcurrency bạn có thể làm:

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