0

我正在使用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 中断,但这不是重点)。在线路开始变得很长之后,它变得难以管理。

尖端?

4

3 回答 3

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(并严重失败)。

另请注意,“从不同的文件加载”本质上与“读取文件”然后“从字符串加载”相同。

于 2011-04-12T18:44:56.403 回答
1

编辑

我刚刚找到了这个 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' });
});
于 2011-04-12T18:47:21.507 回答
1

我们使用 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>
于 2011-04-13T08:09:49.733 回答