jquery templating - import a file?

I'm working with backbone.js, but as far as I've seen, it doesn't care what templating system you use. Currently I'm trying out mustache.js, but I'm open to other ones. I'm a little annoyed though with the way I have to put a template into a string:

var 开发者_开发知识库context = {
    name: this.model.get('name'),
    email: this.model.get('email')
}

var template = "<form>Name<input name='name' type='text' value='{{name}}' />Email<input name='email' type='text' value='{{email}}' /></form>";

var html = Mustache.to_html(template, context);
    $(this.el).html(html);
    $('#app').html(this.el);

I'd like if I could load it from a different file or something somehow. I want to be able to have template files in order to simplify things. For example, if I put it all in a string, I can't have breaks (well I can have html breaks, but that's not the point). After the line starts to get very long, it becomes unmanageable.

Tips?

Updated (4/11/14):

As answered by OP below:

Unfortunately, the jQuery team has moved the templating functionality out of jQuery Core. The code is still available as a library here: github.com/BorisMoore/jquery-tmpl and here: github.com/borismoore/jsrender

Original Answer:

I just used this a couple of hours ago: http://api.jquery.com/category/plugins/templates/

It's an official jQuery plugin(i.e. the devs endorse it).

This is the function you need to use for loading templates from things other than strings: http://api.jquery.com/template/

Here's the code to have a template in HTML:

<script id="titleTemplate" type="text/x-jquery-tmpl">
  <li>${Name}</li>
</script>
___________

// Compile the inline template as a named template
$( "#titleTemplate" ).template( "summaryTemplate" );

function renderList() {
  // Render the movies data using the named template: "summaryTemplate"
  $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}

It's in a <script> tag, because that's not visible by default.
Note the type="text/x-jquery-tmpl". If you omit that, it will try to parse it as JavaScript(and fail horribly).

Also note that "loading from a different file" is essentially the same as "reading a file" and then "loading from a string".

Edit

I just found this jQuery plugin - http://markdalgleish.com/projects/tmpload/ Does exactly what you want, and can be coupled with $.tmpl

I have built a lightweight template manager that loads templates via Ajax, which allows you to separate the templates into more manageable modules. It also performs simple, in-memory caching to prevent unnecessary HTTP requests. (I have used jQuery.ajax here for brevity)

var TEMPLATES = {};

var Template = {

  load: function(url, fn) {
    if(!TEMPLATES.hasOwnProperty(url)) {
      $.ajax({
        url: url,
        success: function(data) {
          TEMPLATES[url] = data;
          fn(data);
        }
      });
    } else {
      fn(TEMPLATES[url]);
    }
  },

  render: function(tmpl, context) {
    // Apply context to template string here
    // using library such as underscore.js or mustache.js
  }

};

You would then use this code as follows, handling the template data via callback:

Template.load('/path/to/template/file', function(tmpl) {
  var output = Template.render(tmpl, { 'myVar': 'some value' });
});

We are using jqote2 with backbone because it's faster than jQuery's, as you say there are many :)

We have all our templates in a single tpl file, we bind to our template_rendered so we can add jquery events etc etc

App.Helpers.Templates = function() {

  var loaded = false;
  var templates = {};

  function embed(template_id, parameters) {
    return $.jqote(templates[template_id], parameters);
  }

  function render(template_id, element, parameters) {
    var render_template = function(e) {
      var r = embed(template_id, parameters);
      $(element).html(r);
      $(element).trigger("template_rendered");
      $(document).unbind(e);
    };

    if (loaded) {
      render_template();
    } else {
      $(document).bind("templates_ready", render_template);
    }
  }

  function load_templates() {
    $.get('/javascripts/backbone/views/templates/templates.tpl', function(doc) {
      var tpls = $(doc).filter('script');
      tpls.each(function() {
        templates[this.id] = $.jqotec(this);
      });
      loaded = true;
      $(document).trigger("templates_ready");
   });
  }

  load_templates();

  return {
    render: render,
    embed: embed
  };

}();

They look like

<script id="table" data-comment="generated!!!!! to change please change table.tpl">
<![CDATA[
]]>
</script>