Question

我正在使用backbone.js，但就我所见，它并不关心你使用的模板系统。目前我正在尝试mustache.js，但我对其他人开放。虽然我必须将模板放入字符串中，但我有点恼火：

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);

我想如果我可以从不同的文件或某种方式加载它。我希望能够拥有模板文件以简化操作。例如，如果我把它全部放在一个字符串中，我就不能有休息（好吧我可以有html休息，但这不是重点）。在线路开始变得很长之后，它变得无法管理。

提示？

Answer 1

更新（2014年4月11日）：

如以下OP所述：

不幸的是，jQuery团队已经将模板功能从jQuery Core中移除了。该代码仍可作为库提供：github.com/BorisMoore/jquery-tmpl和此处：github.com/borismoore/jsrender

原始答案：

我刚刚用了几个小时： http://api.jquery.com/category/plugins/templates/

这是一个官方的jQuery插件（即开发者支持它）。

这是您从字符串以外的其他内容加载模板时需要使用的功能：http://api.jquery.com/template/

以下是在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" );
}

它位于<script>标记中，因为默认情况下不可见注意type =“text / x-jquery-tmpl”。如果省略它，它将尝试将其解析为JavaScript（并且可怕地失败）。

另请注意，“从其他文件加载”与“读取文件”基本相同，然后“从字符串加载”。

Answer 2

修改

我刚发现这个jQuery插件 - http://markdalgleish.com/projects/tmpload/完全符合您的要求，并且可以与$.tmpl
结合使用

我构建了一个轻量级模板管理器，它通过Ajax加载模板，允许您将模板分成更易于管理的模块。它还执行简单的内存中缓存以防止不必要的HTTP请求。（为简洁起见，我在这里使用了jQuery.ajax）

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 } };

然后，您将使用以下代码，通过回调处理模板数据：

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

Answer 3

我们正在使用带有主干的jqote2，因为它比jQuery快，正如你所说的有很多:)

我们将所有模板都放在一个tpl文件中，我们绑定到template_rendered，以便我们可以添加jquery事件等等。

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
  };

}();

他们看起来像

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

jquery模板 - 导入文件？

3 个答案: