chap03 -> Custom bindings -> The currency binding

ko-cart/js/custom/koBindings.js

@@ -2,9 +2,24 @@ ko.bindingHandlers.toggle = {
   init: function (element, valueAccessor) {
     var value = valueAccessor();
     ko.applyBindingsToNode(element, {
-            click: function() {
+      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