javascript - Mustache.js 转义 "/"

Question

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

{
    "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 文件显示到模板中:

<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>

一切正常，但由于某种原因，图像属性中的斜线被转义，导致图像不显示。

我尝试通过在 JSON 文件前面添加反斜杠来转义 JSON 文件中的斜杠。但是我得到的不是正确的路径。

catalog\/images\/img2.jpg

我还尝试使用 {{{ image }}} 禁用 HTML 转义，我明白了。

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

如何正确显示图像属性？

谁能帮我解决这个问题？

编辑:用于生成模板的JS:

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

Answer 1

据我所知，它应该适用于三 mustache {{{image}}}。在 src 之后您还缺少 =。

示例 fiddle :

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>