Knockout bindingHandler for comma separated numbers with same entry again in a textbox

≯℡__Kan透↙ 提交于 2019-12-08 09:56:25

问题


I needed to create a Knockout bindingHandler which would format the amount to comma separated numbers. After a little searching I found the solution here (Thanks to @nemesv for the solution) which uses http://numeraljs.com/ for the conversion.

the binder is as follows:

ko.bindingHandlers.formatMoney = {
  init: function(element, valueAccessor) {

    var value = valueAccessor();

    var interceptor = ko.computed({
        read: function() {
            return numeral(ko.unwrap(value)).format('0,0.00');
        },
        write: function(newValue) {
            if($.trim(newValue) == '')
                value("0");
            else
                value(numeral().unformat(newValue));
        }
    }).extend({ notify: 'always' });

    if(element.tagName.toLowerCase() == 'input' )
        ko.applyBindingsToNode(element, {
            value: interceptor
        });
    else
        ko.applyBindingsToNode(element, {
            text: interceptor
        });
  }
}

I used it and it works perfectly in normal cases. But I need to fix it when using it with textbox.

The issue is that an observable is being used which are normally only notified if the value actually changed. So the actual formater is applied if I type a different value every time. So for example

  • if I type 1234 for the first time and textbox loses focus, it gets converted to 1,234.00.
  • now if you type 1234 again in the textbox. it does not work and the binder's read method is not called.

What do I have to do to make the interceptor's read method fire everytime even if the observable has the same value.?

Sample Fiddle: http://jsfiddle.net/vEcSq/4/

Thanks.


回答1:


You can use the valueHasMutated function on the observable to alert subscribers that it has changed, even if it hasn't. In the write function on the interceptor, add the following line as the last line of the function.

value.valueHasMutated();

I have updated your jsfiddle with the call and it seems to be working correctly.



来源:https://stackoverflow.com/questions/23803394/knockout-bindinghandler-for-comma-separated-numbers-with-same-entry-again-in-a-t

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!