jQuery的模板-導入文件？

Question

我正在使用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中斷，但這不是重點）。 該行開始變得很長之后，它變得難以管理。

提示？

Answer 1

更新（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（並嚴重失敗）。

另請注意，“從其他文件加載”與“讀取文件”然后“從字符串加載”基本上相同。

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>