是否有可能使用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一个蒙面输入？

回答

相关问题