The ViewModel module

We have just one view-model in our application. This is a component where we can apply the singleton module approach.

We are going to carefully create our first module step by step:

1. Open the viewmodel.js file.

2. Define the Shop module, which is the top module of our application:

   var Shop;

3. Initialize the Shop module by applying the extension pattern:

   Shop = Shop || {};

4. Define the ViewModel component:

   Shop.ViewModel = (function(){})();

5. Set the code from the unmodularized view-model version inside the module:

   Shop.ViewModel = (function(){
     var debug = ko.observable(false);
     var showDebug = function () {
       debug(true);
     };
   
     var hideDebug = function () {
       debug(false);
     };
     var visibleCatalog = ko.observable(true);
     // ... the rest of the code
     return {
       debug: debug,
       showDebug:showDebug,
       hideDebug:hideDebug,
       searchTerm: searchTerm,
       catalog: filteredCatalog,
   ....
     };
   })();

6. You have not converted other files into modules, but you are now going to add dependencies...