Mustache.js外部模板(不带jQuery）

Mustache.js external template (without jQuery)

本文关键字：不带 jQuery js 外部 Mustache      更新时间：2023-09-26

我正在编写一个没有jQuery作为依赖项的组件，我希望找到一种方法来加载一个没有jQuery的外部Mustache.js模板。使用jQuery的$.get方法似乎是可行的，但我尝试在普通JS中实现这一点。

我尝试使用XMLHttpRequest并将模板附加到主体，然后用JSON对其进行水合，但当我的JS试图将JSON放入模板中时，模板无法水合（cannot read property innerHTML of null）。这是我的代码（在CoffeeScript中，test.js是胡子模板）：

req2 = new XMLHttpRequest()
req2.onload = ->
  foo = document.getElementById('thatsmyjam')
  templ = document.createTextNode(this.responseText)
  foo.insertAdjacentHTML('beforeEnd', templ)
req2.open('GET', 'test.js', { async: false})
req2.responseType = 'document'
req2.send()

这在DOM中添加了文本[object Text]，而不是将其视为HTML，因此它似乎是在评估HTML字符串，而不是像这样呈现它。

可能还有更好的方法。我基本上是在尝试将我的应用程序（获得JSON）、splash.js和模板组合成一个串联的、缩小的文件，作为UI小部件分发。

我还研究了一些类似Hogan.js的东西来预编译模板，但感觉很复杂，而且我不能在这个项目中使用Node。

更新

如果我将上面的CoffeeScript更新为：

req2 = new XMLHttpRequest()
req2.onload = ->
  foo = document.getElementById('thatsmyjam')
  window.templ = document.createTextNode(this.responseText)
  foo.insertAdjacentHTML('beforeEnd', templ)
req2.open('GET', 'test.js', { async: false})
req2.send()

然后在我的应用程序的相关部分中，它被视为一个字符串，试图呈现模板：

populateDom: =>
    self = @
    @request.addEventListener 'loadend', ->
      if @status is 200 && @response
        resp = self.responseAsJSON(@response)
        # here, window.templ is a string returned from the XMLHttpRequest above,
        # as opposed to an actual "template", so Mustache can't call render with it.
        rendered = Mustache.render(window.templ, resp)
        document.getElementById('thatsmyjam').innerHTML = rendered
        self.reformatDate(resp)

因此Mustache对待字符串的方式不同于脚本标记中的模板。有没有办法让Mustache将该字符串识别为合法模板？

我发现了如何使用核心JavaScript检索外部模板，该实现的灵感来自于这个SO答案。这个过程本质上是创建一个新的div，用XMLHttpRequest检索模板，并用模板字符串填充创建的div的innerHTML。以下是CoffeeScript:中的实现

class TemplateManager
  templateUrl: '/path/to/template.mustache'
  retrieveTemplate: ->
    req = new XMLHttpRequest()
    req.onload = ->
      div = document.createElement('div')
      div.innerHTML = this.responseText
      window.mustacheTemplate = div
    req.open('GET', @templateUrl, { async: false})
    req.send()

然后你可以拨打

rendered = Mustache.render(window.mustacheTemplate.innerHTML, resp)
document.getElementById('YOURDIV').innerHTML = rendered

以使用resp（您的JSON数据）渲染模板。

这里有一个2018年的替代方案，使用fetch并行获取数据和模板：

// Get external data with fetch
const data = fetch('data.json').then(response => response.json());
// Get external template with fetch
const template = fetch('template.mst').then(response => response.text());
// wait for all the data to be received
Promise.all([data,template])
.then(response => {
    resolvedData = response[0];
    resolvedTemplate = response[1];
    // Cache the template for future uses
    Mustache.parse(resolvedTemplate);
    var output = Mustache.render(resolvedTemplate, resolvedData);
    // Write out the rendered template
     return document.getElementById('target').innerHTML = output;
}).catch(error => console.log('Unable to get all template data: ', error.message));
相关文章：