Выделение рендеринга в виде текста

Я включил выделение в консоли администратора Algolia, и термины в моих результатах поиска заключаются в "" и "", но они отображаются как обычный текст, а не как HTML. Другими словами, если я ищу «тест», я вижу все экземпляры слова «тест», заключенные в теги, вместо того, чтобы отображаться в соответствии со стилем этого тега.

Мой код для отображения результатов выглядит следующим образом:

search.addWidget(
    instantsearch.widgets.hits({
         container: '#hits-container',
         templates: {
           empty: 'No results',
           item: '<strong><a href="{{url}}" target="_blank">{{title}}</a></strong><br>{{type}}<br><i><span style="font-size: smaller !important;"{{_highlightResult.summary.value}}</span></i><br>'
         },
         hitsPerPage: 25
    })
);

Я чувствую, что упускаю из виду что-то очевидное.

Кроме того, где я могу найти ссылку на все возможные переменные, которые я могу использовать в коде шаблона? Я не уверен, что понимаю разницу между теми, у кого две скобки, и теми, у кого три скобки.


algolia
person GregVP    schedule 23.03.2016    source источник
comment
Вышеприведенное вырезало мои теги EM. Я использую теги подсветки по умолчанию в панели конфигурации Algolia.   -  person GregVP    schedule 24.03.2016
comment
Согласно информации на этой странице (patternlab.io/docs/data-json-mustache.html) Я думаю, что ответ заключается в использовании тройных фигурных скобок вместо двойных фигурных скобок. Но когда я добавляю тройные скобки, я получаю ошибку в строке 35 invariant.js, которая вызывается автоматически.   -  person GregVP    schedule 24.03.2016

Ответы (2)


arrow_upward
4
arrow_downward

Выделенный результат сохраняется в атрибуте _highlightResult. Таким образом, вместо {{title}} вы можете использовать {{{_highlightResult.title.value}}}, и вы получите выделенное значение HTML.

person speedblue    schedule 29.03.2016

arrow_upward
5
arrow_downward

Что касается вашего первого вопроса, я не могу найти ссылку на invariant.js ни в instantsearch.js, ни в hogan.js, но она может использоваться в одной из их зависимостей. Stacktrace очень поможет.

Однако в вашем шаблоне уже есть две вещи, которые нужно изменить:
Вы правы в отношении необходимости тройные фигурные скобки, чтобы избежать экранирования HTML-кода.
В вашем шаблоне также отсутствует закрывающая >.

Часто, когда у вас возникают проблемы с шаблоном, попробуйте написать его с отступом, это очень помогает быстро визуализировать ошибки.

'<strong>' +
'  <a href="{{url}}" target="_blank">' +
'    {{title}}' +
'  </a>' +
'</strong>' +
'<br>' +
'{{type}}' +
'<br>' +
'<i>' +
'  <span style="font-size: smaller !important;"' + // Here a closing > is missing
'    {{_highlightResult.summary.value}}' + // Here you need to use triple braces
'  </span>' +
'</i>' +
'<br>'

Чтобы визуализировать все доступные свойства, вы можете использовать параметр transformData, который доступен почти во всех виджетах instantsearch.js (см. вкладку «Все параметры» в документации). Обычно он используется для изменения данных непосредственно перед их передачей в шаблон, но также может использоваться для ведения журналов.

instantsearch.widgets.hits({
     container: '#hits-container',
     transformData: {
       item: function (data) {
         console.log(data);
         return data;
       }
     }
     // Other options
});

При этом откройте консоль браузера и введите запрос, чтобы узнать, какие атрибуты есть у объектов.

person Jerska    schedule 29.03.2016