knockout global custom binding

Question

The requirement is to format the amounts displayed on all the pages. This is my code for custom binding.

(function () {
    function refresh(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(getCultureSpecificAmount(val));
    }
    ko.bindingHandlers.currency = {
        init: refresh,
        update: refresh
    }
})();

And this is the method which formats the amounts (not so relevant but still posting)

function getCultureSpecificAmount(number) {
var result = 0;
var regex = /[+-]?\d+(?:\.\d+)?/g;
var tempNumber = number;

if (match = regex.exec(number.toString())) {
    tempNumber = match[0];
}

result = (parseFloat(tempNumber)).toLocaleString(culture, { maximumFractionDigits: currencyDecimalDigits, minimumFractionDigits: 0 });
return (number.toString()).replace(tempNumber, result);

}

This is from the cshtml to show how I am binding it

 <span style="font-weight:bold" data-bind="currency:PurchaseOrderValue"></span>

The getCultureSpecificAmount method is written in a common js. Currently I am writing the code for custom binding on each js. If I move this code to the common.js then it stops working. Writing this code on every page makes the code look really ugly. Is there a way to define custom binding globally and use it across all pages. This is my project on knockout so I am completely clueless.

Answer 1

Here is something that works. One of the issues I found was that the if(match = regex.exec(...)) needed to move outside of the if(...) statement, but other than that, the below code is the essentially the same, so you weren't far off in getting it working.

function getCultureSpecificAmount(number) {
  var result = 0;
  var regex = /[+-]?\d+(?:\.\d+)?/g;
  var tempNumber = number;

  var match = regex.exec(number.toString());
  if (match != null) {
    tempNumber = match[0];
  }
  var culture = "en-AU";
  var currencyDecimalDigits = 2;
  result = (parseFloat(tempNumber)).toLocaleString(culture, {
    maximumFractionDigits: currencyDecimalDigits,
    minimumFractionDigits: 0
  });
  return (number.toString()).replace(tempNumber, result);
}

function refresh(element, valueAccessor) {
  var val = ko.utils.unwrapObservable(valueAccessor());
  $(element).text(getCultureSpecificAmount(val));
}
ko.bindingHandlers.currency = {
  init: refresh,
  update: refresh
}

var vm = {
  PurchaseOrderValue: ko.observable(3596.94985)
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Purchase Order Total</label>
<span style="font-weight:bold" data-bind="currency:PurchaseOrderValue"></span>
<br/>
<label>Edit Purchase Order Total</label>
<input  data-bind="textInput: PurchaseOrderValue" />