jQuery的模板-导入文件？

如何解决jQuery的模板-导入文件？

| 我正在使用bone.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中断，但这不是重点）。该行开始变得很长之后，它变得难以管理。提示？

解决方法

更新（14/11/14）：如以下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（并严重失败）。另请注意，“从其他文件加载”与“读取文件”然后从字符串加载“”基本相同。 ,编辑我刚刚找到了这个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\' });
});

,我们将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的模板-导入文件？

如何解决jQuery的模板-导入文件？

解决方法

相关推荐