Json'dan Kısa HTML Kodu, işlenen sürüm yerine HTML kodunu görüntüleyecektir

Question

Kullanıcı verileriyle dolu bir dizi alıyorum. ul'da gösterilmeleri gerekir. Alanlardan biri, her kullanıcı için bu <span class="red-text">[Admin]</span> gibi bir html kodu olarak önektir. Ancak li öğesini eklemeyi denediğimde, yayının kırmızı versiyonu yerine html kodunu oluşturur.

Benim json kodu:

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

Ve 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); 
    }); 
}); 

Listesi'nde örnek öğe. [Yönetici] kırmızı ve html kodu

Answer 1

olmadan gerektiğini Gidon {{prefix}} kullanırken kendisine vermek değerleri kaçar. Ham HTML kullanmak istediğinizde, onu kaçırmamak için {{{prefix}}} kullanmanız gerekir.