テキストとしてレンダリングを強調表示する

Question

Algolia管理コンソールでハイライト表示を有効にしていて、検索結果の用語が「」と「」とラップされていますが、レンダリングされる代わりにプレーンテキストとして表示されますHTML。つまり、「test」を検索すると、「test」という単語のすべてのインスタンスが、そのタグのスタイルに従ってレンダリングされるのではなく、タグにラップされていることがわかります。次のような結果をレンダリングする

私のコードは次のとおりです。私は何かを明らかに見下ろすてるように私は感じ

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 
    }) 
); 

。

また、テンプレートコードで使用できるすべての変数の参照はどこにありますか？私は、2つの角括弧を持つものと3つの角括弧を持つものの違いを理解していません。

Answer 1

強調表示された結果は、_highlightResult属性に格納されます。 {{title}}の代わりに、{{{_highlightResult.title.value}}}を使用すると、ハイライトされたHTML値を持つことになります

Answer 2

最初の質問については、invariant.jsinstantsearch.jsでもhogan.jsでも、依存関係の1つで使用される可能性があります。スタックトレースは大いに役立ちます。

しかし、あなたのテンプレートには既に2つの変更があります：
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>' 

は、使用可能なすべてのプロパティを視覚化するためには、ほぼすべてのinstantsearch.jsのウィジェットで提供されていますtransformDataパラメータを使用します（ 『すべてのオプション』タブin the documentationを参照）することができます。これは通常、テンプレートに渡す直前にデータを変更するために使用されますが、一部のロギングにも使用できます。

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

これで、ブラウザコンソールを開き、オブジェクトの属性を確認するクエリを入力します。