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

Question

我正在编写一个没有jQuery作为依赖项的组件,我希望找到一种方法来加载一个没有jQuery的外部Mustache.js模板.使用jQuery的$.get方法似乎有效,但我试图在vanilla JS中做到这一点.

我尝试使用an 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()

这会[object Text]在DOM中添加文字文本而不是将其视为HTML,因此它似乎是在评估HTML字符串而不是将其渲染为HTML.

可能有更好的方法.我基本上试图将我的App(获取JSON),mustache.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将该字符串识别为合法模板？

Answer 1

我想出了如何使用核心 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

使用您的 JSON 数据呈现模板resp。