Question

我正在编写一个没有jQuery作为依赖项的组件，我希望找到一种方法来加载一个没有jQuery的外部Mustache.js模板。使用jQuery的$.get方法appears to work，但我试图在vanilla 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字符串而不是将其渲染为。

可能有更好的方法。我基本上试图将我的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使用受this SO answer启发的实现来检索外部模板。该过程基本上是创建一个新的"image_id";"encode" 166;"89504e470d0a1a0a0000000d49484452000001e0000003160806000000298 ..."，使用div检索模板，并使用模板字符串填充创建的XMLHttpRequest的{{1}}。这是CoffeeScript中的实现：

div

然后你可以打电话

innerHTML

使用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()渲染模板，即JSON数据。

Answer 2

这是一个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));

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

更新

2 个答案: