Kendo ui template is not working with html encoded symbols

Question

I have a template like that

<script type="text/x-kendo-template" id="email-view-template">
    <div>#=email_subject#</div>
    <div>#=email_body#</div>
</script>

The values comes from database(email_subject and email_body). Because of email_body kendo template is not working. email_body can have some encoded symbols (like ')

Normally if I use # character in template i escape like \\# . but email_body comes from database.

How can I solve this problem?

Example email_body which is comes from database

<p>http://www.revula.com/tto/admin/event/show/id/3</p><p>Linkte detayları verilen etkinliğe katılmak isteyen tüm personelin bilgisi için Özyeğin Üniversitesinden aldığım aşağıdaki mesajı paylaşıyorum.</p><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Ekrem Bey Merhaba,</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35228" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Telefonda da bahsettiğim gibi eğitim verimliliğini arttırabilmek için aşağıda linkini paylaştığım anketi ekip arkadaşlarınıza, eğitim öncesi tamamlanması doğrultusunda iletebilirseniz çok seviniriz.</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35230" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><a href="https://tr.surveymonkey.com/s/TargetEgitimi" id="yui_3_16_0_1_1418222798054_35229" rel="nofollow" shape="rect" style="margin:0px;padding:0px;background-color:transparent;color:purple;outline:none;" target="_blank">https://tr.surveymonkey.com/s/TargetEgitimi</a> </div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;"><br clear="none" /></div><div id="yui_3_16_0_1_1418222798054_35216" style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">İyi çalışmalar,</div><div style="font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;">Gizem Asker/ÖzÜ</div><div></div><p></p>

Answer 1

I would suggest using jQuery for decoding it. You can do it by:

$("<div/>").html(subject).text()

This uses jQuery by appending it to the a div element but since it is not part of your page this is not a problem and then get text for it.

Following a snippet showing this approach

$(document).ready(function() {
  var msg = "<p>http://www.revula.com/tto/admin/event/show/id/3</p><p>Linkte detayları verilen etkinliğe katılmak isteyen tüm personelin bilgisi için Özyeğin Üniversitesinden aldığım aşağıdaki mesajı paylaşıyorum.</p><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Ekrem Bey Merhaba,</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35228' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Telefonda da bahsettiğim gibi eğitim verimliliğini arttırabilmek için aşağıda linkini paylaştığım anketi ekip arkadaşlarınıza, eğitim öncesi tamamlanması doğrultusunda iletebilirseniz çok seviniriz.</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35230' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><a href='https://tr.surveymonkey.com/s/TargetEgitimi' id='yui_3_16_0_1_1418222798054_35229' rel='nofollow' shape='rect' style='margin:0px;padding:0px;background-color:transparent;color:purple;outline:none;' target='_blank'>https://tr.surveymonkey.com/s/TargetEgitimi</a> </div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'><br clear='none' /></div><div id='yui_3_16_0_1_1418222798054_35216' style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>İyi çalışmalar,</div><div style='font-family:'Helvetica Neue', 'Segoe UI', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:13px;background-color:#ffffff;'>Gizem Asker/ÖzÜ</div><div></div><p></p>";
  var decoded = $("<div/>").html(msg).text();
  
  console.log("decoded", decoded);
  var model = kendo.observable({
    email_subject : "This is the subject",
    email_body : decoded
  });

  var tmpl = kendo.template($("#template").html());
  $("#tgt_template").html(tmpl(model));
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.web.min.js"></script>

<script type="text/x-kendo-template" id="template">
  <div>
   <div>Subject: #=email_subject#</div>
    <div>#=email_body#</div>
  </div>
</script>


<div id="tgt_template"></div>