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

Question

我正在編寫一個沒有jQuery作為依賴項的組件，我希望找到一種方法來加載一個沒有jQuery的外部Mustache.js模板。 使用jQuery的$.get方法似乎可行 ，但我試圖在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字符串而不是將其渲染為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

使用resp渲染模板，即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));