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:
Open the
viewmodel.jsfile.Define the
Shopmodule, which is the top module of our application:var Shop;
Initialize the
Shopmodule by applying the extension pattern:Shop = Shop || {};Define the
ViewModelcomponent:Shop.ViewModel = (function(){})();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, .... }; })();You have not converted other files into modules, but you are now going to add dependencies...