Hervorhebung von Rendering als Text

Ich habe die Hervorhebung in der Algolia-Admin-Konsole eingeschaltet, und die Begriffe in meinen Suchergebnissen werden mit "" und "" eingewickelt, aber sie werden als Nur-Text angezeigt anstatt als gerendert HTML. Mit anderen Worten, wenn ich nach "test" suche, sehe ich alle Instanzen des Wortes "test" in den Tags eingeschlossen, anstatt entsprechend dem Stil dieses Tags gerendert zu werden.Hervorhebung von Rendering als Text

Mein Code, um die Ergebnisse zu machen ist wie folgt:

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

Ich fühle mich wie ich offensichtlich etwas mit Blick auf bin.

Auch - wo finde ich einen Verweis auf alle möglichen Variablen, die ich im Vorlagencode verwenden kann? Ich bin mir nicht sicher, ob ich den Unterschied zwischen denen mit zwei Klammern und denen mit drei Klammern verstehe.

Quelle

2016-03-23 GregVP

Die oben genannten streifte meine EM-Tags. Ich verwende die Standard-Hervorhebungs-Tags im Algolia-Konfigurationsfenster. – GregVP

Nach den Informationen auf dieser Seite (http://patternlab.io/docs/data-json-ustache.html) denke ich, die Antwort ist, dreifache Klammern anstelle von doppelten Klammern zu verwenden. Aber wenn ich die dreifachen Klammern hinzufüge, bekomme ich einen Fehler in Zeile 35 von invariant.js, die automatisch aufgerufen wird. – GregVP

Das hervorgehobene Ergebnis wird im Attribut _highlightResult gespeichert. Anstatt also {{title}}, können Sie {{{_highlightResult.title.value}}} und Sie werden die markierten HTML-Wert

Quelle

2016-03-29 04:06:35 speedblue

Über Ihre erste Frage haben, kann ich nicht einen Verweis auf invariant.js in finden entweder instantsearch.js noch hogan.js, aber es könnte in einer ihrer Abhängigkeiten verwendet werden. Ein Stacktrace würde viel helfen.

Allerdings gibt es bereits zwei Dinge in Ihrer Vorlage zu ändern:
Sie haben Recht über die Notwendigkeit von triple braces to avoid escaping of HTML code.
Ihre Vorlage fehlt auch eine schließende >.

Oft, wenn Sie Probleme mit einer Vorlage haben, versuchen Sie, es mit Einzug zu schreiben, es hilft sehr schnell Fehler zu visualisieren.

'<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>'

alle verfügbaren Objekte sichtbar zu machen, können Sie den transformData Parameter verwenden, die auf fast allen instantsearch.js ‚s-Widgets zur Verfügung (‚Alle Optionen‘in the documentation sehen). Es wird normalerweise verwendet, um die Daten zu ändern, bevor sie an die Vorlage übergeben werden, kann aber auch für die Protokollierung verwendet werden.

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

Öffnen Sie dazu Ihre Browser-Konsole und geben Sie eine Abfrage ein, um zu sehen, welche Attribute die Objekte haben.

Quelle

2016-03-29 10:09:40 Jerska

Antwort

Verwandte Themen