Diagram: knockout.js MVVM in conjunction with ASP.NET Razor View architecture

Understanding the base structure of the knockout.js MVVM system in conjunction with the ASP.NET RazorEngine semi-static views.

 

MVVM consists of a View, ViewModel and (Data)Model approach where the DataModel is represented by the app.datamodel.js respectively ASP.NET controller/model concept, the ViewModel located in several app.XYZViewModel.js files e.g. app.LoginViewModel.js. The views are realized by razor engine based semi-static html files.

 

Please keep in mind that the diagram solely shows the logical correlation concerning the MVVM architectural pattern and does not reflect the deployment on runtime. The HTML content consisting of the HTML code of Index.cshtml and the partial HTML codes is assembled and rendered together into one single HTML Output stream and sent out to the requesting browser. The browser then collects the stream and builds a so called DOM model of it. DOM is the abbreviation for Document Object Model. The Dom is a hierarchical node structur that amongst others represents the loaded HTML stream. All subsequent automation actions operate on this DOM via JavaScript, jQuery and additional JS based librareis e.g. knockout.js.