jQuery ViewLoader

ViewLoader allows you to break up a page into multiple views using your template engine of choice (e.g. jQuery Template or jsView), each loaded and rendered dynamically. When combined with KnockoutJS you can have each view be data-bound to a view model.

Syntax

$(document).viewloader({
    logLevel: "debug",

   afterEachTemplate: function (templateId) { 
      // code to execute after each view has been successfully loaded
   },

   success: function (successfulResolution) {
      // Code to execute once all views have been loaded for the page
   },

   error: function (failedResolution) {
      // Code to execute if an error occurs while loading the views 

});

Note: You can pass a versionId setting so that views can be retrieved with a version identifier in the querystring, to ensure proper cache retrieval or caching invalidation. Example:

$(document).viewloader({
    versionId: '1.0.0-1',
    // ...
});

Demo

See the demo folder for a complete example. The demo consists of:

1. An index.html containing 2 views, each view has a subview
2. Four separate view files (with the .view.html extension)
3. An application.js with an InitializeApplication function initializing the ViewLoader

Note that if you want to run the demo outside a web server (i.e. from the file system), you will need to use either FireFox or IE in IE10 mode as other browsers will prevent AJAX calls to retrieve the template due to strict CORS rule enforcement).

(c) 2017 Philippe Monnet (@techarch) http://blog.monnet-usa.com/