JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<span data-bind="text: a"></span>
<br>
<span data-bind="text: b"></span>
<br>
<span data-bind="text: tot"></span>

<hr>
<input data-bind="value2: a" value="1,5" size="5">
<input data-bind="value2: b" value="2,3" size="5">
<input data-bind="value2: tot" size="5">

JavaScript

ko.bindingHandlers.value2 = {
      init: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var obs = valueAccessor();
        var v = element.value || '0';
        obs(parseFloat(v.replace(',', '.')));
        ko.applyBindingsToNode(element, {
          value: obs
        }, context);
        $(element).on('change', function () {
          var v = $(this).val();
          console.log(v);
          obs(parseFloat(v.replace(',', '.'), 10));
        });
      },
      update: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var obs = valueAccessor();
        $(element).val(obs().toFixed(2).replace('.', ','));
      }
    };


    var vm = {
      a: ko.observable().extend({
        numeric: 2
      }),
      b: ko.observable().extend({
        numeric: 2
      })
    };
    vm.tot = ko.computed({
      read: function () {
        console.log('computed:', vm.a(), vm.b());
        return vm.a() + vm.b();
      },
      write: function () {}
    });

    ko.applyBindings(vm);