Mustache.js逃避“/” [英] Mustache.js escaping "/"

问题描述

我有一个简单的JSON文件，如下所示：

I have a simple JSON file as shown below:

{
    "products": [
        {
            "title": "United Colors of Benetton Men's Shirt",
            "description": "Cool, breezy and charming – this solid green shirt from United Colors of Benetton is born on the beach. Effortlessly classy, this full sleeved shirt is perfect when worn with faded blue jeans and a pair of shades for a weekend get-together.",
            "quantity": "10",
            "cost": "3.00",
            "brand": "United",
            "image": "catalog/images/img2.jpg",
            "category": "1",
            "popularity": "100"
        }

    ]
}

我使用Mustache.js将此JSON文件显示在模板中：

I am displaying this JSON file using Mustache.js into the template blow:

<table class="product-list">
    {{#products}}
    <tr>
        <td> 
            <table class="product">
                <tr>
                    <td class="product-image">
                        <img src"{{image}}" height="150" width="150" />
                    </td>
                    <td class="product-details">
                        <p class="title">{{title}}</p>
                        <p class="description">{{description}}</p>
                        <p class="quantity"><b>Quanity Available: </b>{{quantity}}</p>
                        <p class="cost"><b>Cost: </b>&pound; {{cost}}</p>
                        <p class="brand"><b>Brand:</b> {{brand}}</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    {{/products}}
</table>

一切正常但是由于某种原因，图片属性中的斜杠被转义，因为图像不在不显示。

Everything works fine but for some reason the slashes in the image property are escaped due to which the images don't show up.

我已经尝试通过在它们前面添加反斜杠来转义JSON文件中的斜杠。但是我没有找到正确的路径。

I've tried escaping slashes in the JSON file by adding a backslash in front of them. But instead of correct path I get this.

catalog\/images\/img2.jpg

我还尝试使用{{{image}}}禁用HTML转义，我得到了这个。

I also try disabling HTML escaping by using {{{ image }}} and I get this.

catalog\="" images\="" img2.jpg=\""

如何正确显示图像属性？

How can I display the image property properly?

任何人都可以请帮帮我吗？

Can anyone please help me with this?

编辑： JS用于生成模板：

JS used to generate the template:

$template = $('#product-template').html();
$renderedHtml = Mustache.render($template, $data);
$('#content').html($renderedHtml);

推荐答案

从我看来它应该适用于三重胡须 {{{图像}}} 。您在 src 之后也缺少 = 。

From what I see it should work with triple mustaches {{{image}}}. You are also missing = after src.

示例小提琴：

var jsn = {
  "products": [{
      "title": "United Colors of Benetton Men's Shirt",
      "description": "Cool, breezy and charming – this solid green shirt from United Colors of Benetton is born on the beach. Effortlessly classy, this full sleeved shirt is perfect when worn with faded blue jeans and a pair of shades for a weekend get-together.",
      "quantity": "10",
      "cost": "3.00",
      "brand": "United",
      "image": "http://static.cilory.com/26111-large_default/united-colors-of-benetton-men-white-t-shirt.jpg",
      "category": "1",
      "popularity": "100"
    }

  ]
};

var t = document.getElementById('template').innerHTML;
var m = Mustache.to_html(t, jsn);
document.getElementById('res').innerHTML = m;
console.log(m);

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script id="template" type="text/template">
  <table class="product-list">
    {{#products}}
    <tr>
      <td>
        <table class="product">
          <tr>
            <td class="product-image">
              <img src="{{{image}}}" height="180" width="150" />
            </td>
            <td class="product-details">
              <p class="title">{{title}}</p>
              <p class="description">{{description}}</p>
              <p class="quantity"><b>Quanity Available: </b>{{quantity}}</p>
              <p class="cost"><b>Cost: </b>&pound; {{cost}}</p>
              <p class="brand"><b>Brand:</b> {{brand}}</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    {{/products}}
  </table>
</script>
<div id="res"></div>

这篇关于Mustache.js逃避“/”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！