JSViews渲染含HTML的扁平数组时HTML标签未解析问题

这问题我太熟悉了！JSViews默认会自动转义所有HTML内容（目的是防范XSS攻击），所以你用{{>#data}}或者{{:#data}}的时候，<b>标签会被转成<b>这种实体字符，自然就只会显示标签文本而不会渲染成加粗效果了。

正确的解决方案：使用{{html}}标签 #

要让带HTML的字符串被正确渲染，你需要用JSViews提供的{{html}}指令——它会跳过HTML转义步骤，直接把内容当作原生HTML输出。

下面是完整的可运行示例代码：

模板部分

<script id="foodTemplate" type="text/x-jsrender">
  <div class="food-list">
    {{for items}}
      <p>{{html:#data}}</p>
    {{/for}}
  </div>
</script>

JavaScript渲染代码

// 你的数据源
var foodData = { "items": ["<b>Steak</b>", "Cheese"] };

// 编译模板并渲染内容
var template = $.templates("#foodTemplate");
var renderedHtml = template.render(foodData);

// 将渲染结果插入页面容器
$("#container").html(renderedHtml);

这样处理后，<b>Steak</b>就会被解析成加粗的“Steak”，而“Cheese”则正常显示文本。

小提醒 #

• 如果是直接输出单个数据项（而非循环数组），写法类似：{{html:items[0]}}
• 注意：使用{{html}}时要确保数据源是可信的，避免引入XSS安全风险！

内容的提问来源于stack exchange，提问作者austinthetaco