是否有可能使用KnockoutJS一個蒙面輸入？

I'm使用插件：https://github.com/plentz/jquery-maskmoney格式化我的錢編輯器...是否有可能使用KnockoutJS一個蒙面輸入？

我試圖在編輯器中使用KnockoutJS，但它不工作......沒有這個面具一切工作正常...

我的代碼測試很簡單：

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

Javascript功能來屏蔽輸入

$("#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());

來源

2012-02-06 Paul

您應該使用計算觀察到一個可寫的。

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());

來源

2012-02-07 16:06:50

如果你正在做這樣的事情與映射插件相結合，創建這個屬性爲空的東西，比如$ .noop（），然後映射，採用相同的邏輯上面，然後綁定 – Jason 2012-05-29 22:41:54

爲什麼不使用淘汰賽延長？ – 2014-08-14 13:39:25

您也可以註冊綁定處理程序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);，因爲它不是在通過鼠標點擊失去焦點，只按Tab鍵觸發更新。

我是新來的淘汰賽，並一直在尋找的結合處理辦法非常好的像這樣的插件和datepickers等

來源

2012-06-05 02:48:59

這是IMO的首選方法。我已經使用這個代碼，它工作得很好。 – BeaverProj 2012-09-12 23:12:53

我認爲這將是更好的調用'$（元素）.maskMoney（「面具」）;'$（元素），而不是'.trigger（「焦點」）;'在更新功能，因爲焦點事件，導致不必要的和無意的焦點 – 2017-03-31 02:22:40

如果您正在使用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 }" />

來源

2013-07-04 23:02:05

是否有可能使用KnockoutJS一個蒙面輸入？

回答

相關問題