2012-01-10 6 views
4

Я использую jsRender для отображения моих данных на странице html. Данные получают отлично. Однако в некоторых элементах контента текст HTML (например, гиперссылка) отображается как текст. В шаблоне jquery существует способ визуализации HTML с помощью {{html. Есть ли что-то подобное в jsRender? Мой код выглядит следующим образом:jsRender Rendering HTML

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

Спасибо.

ответ

2

Глядя на исходный код jsRender, я вижу, что плагин преобразует символы <, > и & в свои объекты HTML. Может быть, вы можете попытаться изменить эти строки из jsRender

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

в

escapeMapForHtml = { 
}, 

виду угрозу безопасности вставки непроверенную HTML из внешних источников!

EDIT: ОК, проверка примеров (особенно 03_no-encoding.html) принесла другое решение. Так идти вперед и отменить ранее предложенные мои изменения и попробуйте использовать

{{=Status!} 

восклицательный знак должны предотвратить jsRender от изменения HTML

+0

Не работает. Он считает, что HTML как строку и помещается в "". например

"http://www.gmail.com"

+0

Посмотрите мои недавние изменения выше ... – devnull69

+0

Возможно, вам стоит удалить первую (нерабочую) часть вашего ответа? – M4N

9

Беты кандидат JsRender теперь вне (см поста Бориса прошлой ночи http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html)

Я написал быстрый скрипку, чтобы показать, как сделать HTML здесь: http://jsfiddle.net/johnpapa/NfUGB/

в принципе, просто используйте {{> 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));​ 
​ 
6

Используйте {{:Status}} для генерации HTML-кода.