A little require.js module that uses the text plugin to get knockout templates from the server. Once the template is returned it uses the stringTemplateEngine to add it to the knockout template engine. This way templates are fetched via XHR and stored in knockout internally which means they are never added to the DOM as script tags.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitattributes
.gitignore
LICENSE
README.md
loadKoTemplate.js

README.md

This little module is used to load knockout templates from the server.

It has dependencies on the require plugin text, knockout.js and the stringTemplateEngine by Ryan Niemeyer.

Basically it is used to get a template and add it to knockout.

It is used something like the following:

define("MenuModule", ["Core", "knockout", "loadKoTemplate!./menuTemplates/menuItem.html"], function (core, knockout, template) {
   
   core.register("MenuModule", function (sandbox) {
      var ko = sandbox.getObservable(),
      viewModel = {
         templateName: "menuItem-html",
         menuItemArray: ko.observableArray()
      };

      return {
         activate: function () {
            sandbox.bind(viewModel);
            viewModel.menuItemArray.push({
               name: "Item One"
            });
            viewModel.menuItemArray.push({
               name: "Item Two"
            });
            viewModel.menuItemArray.push({
               name: "Item Three"
            });
         },
         destroy: function () {
            sandbox.unbind();
         }
      };
   });
});

You can also override the default template name that is used:

define("MenuModule", ["Core", "knockout", "loadKoTemplate!./menuTemplates/menuItem.html!myCustomName"], function (core, knockout, template) {
   
   core.register("MenuModule", function (sandbox) {
      var ko = sandbox.getObservable(),
      viewModel = {
         templateName: "myCustomName",
         menuItemArray: ko.observableArray()
      };

      return {
         activate: function () {
            sandbox.bind(viewModel);
            viewModel.menuItemArray.push({
               name: "Item One"
            });
            viewModel.menuItemArray.push({
               name: "Item Two"
            });
            viewModel.menuItemArray.push({
               name: "Item Three"
            });
         },
         destroy: function () {
            sandbox.unbind();
         }
      };
   });
});