2016-04-10 3 views
3

ユーザーデータでいっぱいの配列を取得しています。それらはulに表示する必要があります。フィールドの1つは、すべてのユーザーのプレフィックスで、<span class="red-text">[Admin]</span>のようなhtmlコードです。しかし、私がli要素を追加しようとすると、赤いバージョンのスパンの代わりにhtmlコードがレンダリングされます。Jsonの短いHTMLコードはレンダリングされたバージョンの代わりにHTMLコードを表示します

私のJSONコード:

{ 
    "users":[ 
     { 
      "id":"1", 
      "usrname":"YannickFelix", 
      "email":"example[email protected]", 
      "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); 
    }); 
}); 

リストの例アイテム。 [管理]

image

+0

また、ハンドルバーを使用していない場合は、jQueryの[parseHTML()](https://api.jquery.com/jquery.parsehtml/)を使用することもできます。 –

答えて

1

赤とhtmlコードなしにする必要がありますハンドルバーは{{prefix}}を使用しているとき、あなたがそれに与える値をエスケープします。生のHTMLを使用する場合は、それをエスケープしないようにするには{{{prefix}}}を使用する必要があります。

関連する問題