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文件显示到模板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>

一切正常工作，但由于某种原因，图像属性中的斜杠被转义，因此图像没有显示。

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

catalog\/images\/img2.jpg

我还尝试使用{图像}}禁用HTML转义，并得到此结果。

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

如何正确显示图像属性？

有人能帮我吗？

编辑： JS用于生成模板：

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

Answer 1

据我所见，它应该适用于三重胡子{{{image}}}。在=之后，您也缺少了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>

​

Answer 2

重写mustache.js escape函数以避免转义文本：

    mustache.escape = function (text) {
      return text;
    };