客户端 Handlebars 导致 404 请求答案

【问题标题】：Client-side Handlebars causes 404 requests客户端 Handlebars 导致 404 请求
【发布时间】：2016-07-15 02:43:38
【问题描述】：

我想在客户端使用把手。在我的 html 代码中，我有这样的调用：

<img src="data/cloud/products/{{key}}/{{images.product.frontal.trans_bg_img}}" alt="">

直接在我的 index.html 中。

在 javascript 中我做这样的事情：

this.emptyPageSource =  $("#productdetail").html();
this.productTemplate = Handlebars.compile(this.emptyPageSource);
var html = this.productTemplate(product);
$("#productdetail").html(html);

效果很好。我将 dom 中的现有 html 片段作为模板一次，然后使用把手应用模板并覆盖旧的 dom 条目。

当我加载页面时，我收到很多 404 请求，因为浏览器已经尝试加载图像资源，即使由于 JS 部分还没有调用模板。

有没有办法避开 404 获取请求？（我没有使用角度或类似的东西 - 只是普通的 js + jquery）

提前谢谢你克里斯

【问题讨论】：

标签： javascript handlebars.js client-side-templating

【解决方案1】：

我将尝试将#productdetail 元素转换为<script type='text/template' id='productdetail'>。如：JSBin

<h1>A Cat</h1>
<script type="text/template" id="productdetail">
<img src="{{image}}" alt="">
</script>
Rest of it

<script>
  var product =  {
    key: '1',
    image: 'https://media.giphy.com/media/freTElrZl4zaU/giphy.gif'
  }
  var emptyPageSource =  $("#productdetail").html();
  var productTemplate = Handlebars.compile(emptyPageSource);
  var html = productTemplate(product);
  $("#productdetail").replaceWith(html);
</script>

浏览器不理解text/template 脚本，只是忽略它。但是我们可以读取脚本标签内的内容，将其用作模板。

【讨论】：