Question

我正在使用jsRender在html页面上呈现我的数据。数据完美呈现。但是，在某些内容项中，HTML文本（如超链接）显示为文本。在jquery模板中，有一种方法可以通过{{html来呈现HTML。 jsRender中有类似的东西吗？我的代码如下：

<p>
{{ =Status}}   //need to convert this to HTML so it should appear as hyperlink.
</p>

感谢。

Answer 1

JsRender beta候选人现已退出（参见Boris昨晚的帖子http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html）

我写了一个快速的小提示，以展示如何在这里呈现HTML：http://jsfiddle.net/johnpapa/NfUGB/

基本上，只需使用{{＆gt; yourProperty}}标记即可呈现HTML编码。使用{{：yourProperty}}跳过编码。

<script id="template" type="text/x-jsrender">
    <p>
    {{:foo}}
    </p>
    <ul>
    {{for testData}}
        <li>{{:name}} - {{:markup}} - {{>markup}}</li>
    {{/for}}
    </ul>
</script>
<div id="div1"></div>

var vm = {
    foo: "names",
    testData: [
        {
            name: "John", 
            markup: "<span style='background: yellow'>John</span>"
        },
        {
            name: "Boris", 
            markup: "<span style='background: orange'>Boris</span>"
        }
    ]
};

$("#div1").html($("#template").render(vm));

Answer 2

使用{{:Status}}生成HTML代码。

Answer 3

查看jsRender的源代码我可以看到该插件转换了＆lt;，＆gt;和＆amp;字符到他们的HTML实体。也许你可以尝试从jsRender

更改这些行

escapeMapForHtml = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;"
},

到

escapeMapForHtml = {
},

注意从外部源插入未经检查的HTML的安全风险！

编辑：好的，检查示例（特别是03_no-encoding.html）带来了另一个解决方案。因此，请继续并撤消我之前提出的更改并尝试使用

{{=Status!}

感叹号应该阻止jsRender更改HTML

Answer 4

尝试一下。

<p>
{^{ =Status}}   
</p>

jsRender呈现HTML

4 个答案: