客户端Handlebars导致404个请求

Client-side Handlebars causes 404 requests

本文关键字：请求 404个 导致 Handlebars 客户端      更新时间：2023-09-26

我想在客户端使用把手。在我的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片段作为模板，然后使用handlers应用模板并覆盖旧的dom条目。

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

有没有办法规避404获取请求？（我没有使用angular或类似的东西——只是简单的js+jquery）

提前谢谢Chris

我将尝试将#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脚本，只是忽略了它。但我们可以将脚本标记中的内容用作模板来读取。

相关文章：