客户端 Handlebars 导致 404 请求
Client-side Handlebars causes 404 requests
我想在客户端使用车把。在我的 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 get 请求? (我没有使用 angular 或类似的东西 - 只是普通的 js + jquery)
提前致谢
克里斯
我会尝试将 #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
脚本,只是忽略它。但是我们可以读取脚本标签中的内容,将其用作模板。
我想在客户端使用车把。在我的 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 get 请求? (我没有使用 angular 或类似的东西 - 只是普通的 js + jquery)
提前致谢 克里斯
我会尝试将 #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
脚本,只是忽略它。但是我们可以读取脚本标签中的内容,将其用作模板。