chap03 -> Custom bindings -> The currency binding

ko-cart/js/custom/koBindings.js

@@ -1,10 +1,25 @@
 ko.bindingHandlers.toggle = {
-    init: function (element, valueAccessor) {
-        var value = valueAccessor();
-        ko.applyBindingsToNode(element, {
-            click: function() {
-                value(!value());
-            }
-        });
-    }
-};
+  init: function (element, valueAccessor) {
+    var value = valueAccessor();
+    ko.applyBindingsToNode(element, {
+      click: function () {
+        value(!value());
+      },
+    });
+  },
+};
+
+ko.bindingHandlers.currency = {
+  symbol: ko.observable("$"),
+  update: function (element, valueAccessor, allBindingsAccessor) {
+    return ko.bindingHandlers.text.update(element, function () {
+      var value = +(ko.unwrap(valueAccessor()) || 0);
+      var symbol = ko.unwrap(
+        allBindingsAccessor().symbol !== undefined
+          ? allBindingsAccessor().symbol
+          : ko.bindingHandlers.currency.symbol
+      );
+      return symbol + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+    });
+  },
+};

ko-cart/views/catalog.html

@@ -20,7 +20,7 @@
         <tbody data-bind="foreach:catalog">
             <tr data-bind="style:lineColor">
                 <td data-bind="text:name"></td>
-                <td data-bind="text:price"></td>
+                <td data-bind="currency:price, symbol:'€'"></td>
                 <td data-bind="text:stock"></td>
                 <td>
                     <button