Рендеринг контента с HTML-тегами в Ractive.js

Я пытаюсь включить HTML-теги в данные, отображаемые Ractive.js (для автоматической подписки химических символов, если кому-то не все равно), но Ractive просто вставляет текст, а не создает новые элементы DOM.

Минимальный тестовый пример, адаптированный из 60-секундного руководства по настройке:

<script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>
</script>

<script type="text/javscript">
    var ractive = new Ractive({
    el: 'container',

    template: '#template',

    data: { name: '<b>world</b>' }
});

Как вы можете видеть в этом JSfiddle, результатом будет Hello, <b>world</b>, а не ожидаемое "Hello, world< /сильный>"

Я предполагаю, что это связано с тем, как Ractive обрабатывает выражения... но я еще не на том этапе, когда источник имеет смысл.

Любые мысли о том, как я могу получить предполагаемое поведение?


javascript html ractivejs
person supervacuo    schedule 07.05.2014    source источник
comment
JSFiddle не отображается должным образом для этих браузеров, опробованных сегодня. Почему? Microsoft Edge 44.17754.1.0 и Google Chrome версии 69.0.3497.100   -  person user2063329    schedule 01.10.2018

Ответы (1)


arrow_upward
11
arrow_downward

Да! Вы можете использовать тройной стежок:

<p>Hello, {{{name}}}!</p>

В традиционных усах это означает «не избегать значения name». В переводе на Ractive это означает «вставить содержимое как HTML, а не как текст».

Имейте в виду, что HTML-код не очищается перед вставкой, поэтому, если name получено в результате пользовательского ввода, существует вероятность XSS и других гадостей: http://jsfiddle.net/rich_harris/4jBC8/.

person Rich Harris    schedule 07.05.2014
comment
Прокляните мое плохое понимание прочитанного. Это сработало отлично, спасибо. - person supervacuo; 07.05.2014