Подчеркивание рендеринга как текста

Question

Я включил выделение в консоли администратора 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 
    }) 
); 

Я чувствую, что я с видом что-то очевидное.

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

Answer 1

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

Answer 2

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

Тем не менее, есть два вещи, которые можно изменить в своем шаблоне:
Вы имеете право на необходимость использования triple braces to avoid escaping of HTML code.
Ваш шаблон также пропускает закрытие >.

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

'<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 «s виджетов (см„Все параметры“на вкладке in the documentation). Обычно он используется для изменения данных непосредственно перед передачей его в шаблон, но также может использоваться для некоторых протоколирования.

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

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