从客户端隐藏HTML模板

Question

I want to keep my client-side code as clean and minimal as possible. My project uses Knockout JS and this template engine: https://github.com/blueimp/JavaScript-Templates . I've created the template at the bottom of my source code with the computed values rendering in a "pre" section per the teamplate (that I don't really want visible). Is there a way to hide the template and call it when the DOM loads?

Answer 1

To load your templates from the server, put them in their own little .html files and then on the client, you can use jquery to fetch them into a variable:

// The variable that we're going to put the template in
var myTemplate;

$.ajax({
      async: false,
      type: "GET",
      url: "/templates/myTemplate.html",
      success : function(data) {
            myTemplate = data;
      }
 });

Then when you want to use the template, you can call templ() with the template:

 var result = tmpl(myTemplate, data);

Note: I've forced jquery to be synchronous using async:false because you want to make sure the template is there when you call on it.