Question

我正在检索一个充满用户数据的数组。它们应显示在ul中。其中一个字段是每个用户的前缀，作为html代码，如<span class="red-text">[Admin]</span>。但是当我尝试追加li元素时，它会渲染html代码而不是span版本的红色版本。

我的json代码：

{
    "users":[
        {
            "id":"1",
            "usrname":"YannickFelix",
            "email":"example@gmail.com",
            "lvl":"4",
            "prefix":"<span class=\"red-text\">[Admin]<\/span>"
        }
    ]
}

我的javascript：

listElemTmplt = `
    <li class="collection-item avatar">
    <i class="material-icons circle {"{{color}}"}">person</i>
    <span class="title">{"{{usrname}}"}</span>
        <p>{"{{prefix}}"} {"{{usrname}}"} | {"{{email}}"}
        </p>
        <span class="secondary-content">
        <a class="waves-effect waves-circle" href="users.php?action=edit&uID={"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">create</i>
        </a>
        <a class="waves-effect waves-circle waves-red modal-trigger" href="#modal{"{{id}}"}">
            <i class="material-icons grey-text text-darken-1">delete</i>
        </a>
    </span>
    <div id="modal{"{{id}}"}" class="modal">
        <div class="modal-content black-text">
            <h4>L&ouml;schen</h4>
            <p>M&ouml;chtest Du den Benutzer "{"{{usrname}}"}" wirklich l&ouml;schen?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Abbrechen</a>
            <a href="users.php?action=del&vID={"{{id}}"}" class="modal-action modal-close waves-effect waves-green btn-flat red-text">L&ouml;schen</a>
        </div>
    </div>
</li>
`;

template = Handlebars.compile(listElemTmplt);
finishedString = [];
$.getJSON("**url**", function (data) {
    console.log(data);
    $("ul#users").html("");
    data["users"].forEach(function (element, index, array) {
        html = template({"{"}id: element["id"], usrname: element["usrname"], email: element["email"], prefix: element["prefix"]{"}"});
        $("ul#users").append(html);
    });
});

列表中的示例项。 [Admin]应为红色且没有html代码

Answer 1

使用{{prefix}}时，把手会转义您为其提供的值。当您想使用原始HTML时，您必须使用{{{prefix}}}告诉它不要逃避它。

来自Json的简短HTML代码将显示HTML代码而不是呈现的版本

1 个答案: