如何从脚本页面动态添加“x-tmpl”脚本到 HTML 页面？答案

【问题标题】：How to add dynamically a "x-tmpl" script from a scripts page to HTML page?如何从脚本页面动态添加“x-tmpl”脚本到 HTML 页面？
【发布时间】：2014-02-19 22:43:40
【问题描述】：

我尝试过使用不同的方法：

添加正文 innerHtml 脚本部分
创建类型为“x-tmpl”的脚本元素

但这没有用。你能帮帮我吗？

谢谢。

【问题讨论】：

标签： javascript jquery html dom dynamic

【解决方案1】：

我在尝试动态加载 Handlebars 模板时遇到了类似的问题，因此我没有尝试将 <script> 元素插入 DOM，而是将编译后的模板存储到全局 Javascript 对象中：

var TEMPLATES = {};    

/**
 * Gets Handlebars template, either from JS if already loaded, or via AJAX request
 * @param name Name of template
 * @param data JSON data for use in template
 * @returns Handlebars template
 */
function get_template(name,data) {
  if(typeof TEMPLATES[name] != 'undefined') {
    return TEMPLATES[name];
  } else {
    $.get(
      TEMPLATE_ROOT + name + '.hb',
      function(template) {
        TEMPLATES[name] = Handlebars.compile(template);
        render_template(name,data);
      }
    );
    return null;
  }
}

请注意我在成功加载模板后对render_template(name,data) 的调用。这只是调用我的函数再次尝试渲染模板，该模板现在将在内存中：

/**
 * Render JSON using Handlebars template
 * @param name Name of Handlebars template
 * @param data JSON data to render
 */
function render_template(name,data){
  var template = get_template(name,data);
  if(template !== null) {
    $('#main').html(template(data.transforms[1].data));
  }
}

我对您正在尝试做的事情做了很多假设，所以希望这会有所帮助。

【讨论】：