2017-02-21 8 views
2

ich implementiert Algolia's InstantSearch auf meiner Rails App. Ich verwende es, um eine Produktliste als Suchergebnisse anzuzeigen.Mit Algolia-Index-Attribute in link_to in Rails App

Auf jedem Produkt gibt es eine Schaltfläche zum Speichern. Ich möchte die ID jedes Ergebnisses abrufen, um es in einem link_to Tag weiterzugeben.

Für die sofortige Suche Implementierung folgte ich Algolia's guide.

Ich habe einen Index namens Produkte (auf meinem Algolia-Konto) erstellt. Es hat einen Titel und eine ID (+ eine von Algolia vergebene Objekt-ID).

Mein application.js mit den Algoli Suche Widgets Datei:

var search = instantsearch({ 
    // Replace with your own values 
    appId: "1JJ5DY0CLA", 
    apiKey: 'e24882443747d61c496efc4e17288a36', // search only API key, no ADMIN key 
    indexName: 'Idea', 
    urlSync: true 
}); 


search.addWidget(
    instantsearch.widgets.searchBox({ 
    container: '#search-input', 
    placeholder: 'Search for growth ideas', 
    poweredBy: true 
    }) 
); 

search.addWidget(
    instantsearch.widgets.hits({ 
    container: '#hits', 
    hitsPerPage: 10, 
    templates: { 
     item: getTemplate('hit'), 
     empty: getTemplate('no-results') 
    } 
    }) 
); 


search.start(); 

function getTemplate(templateName) { 
    return document.querySelector('#' + templateName + '-template').innerHTML; 
} 

Der Code in meinem index.html.erb Blick sieht es wie:

<div id="hits"></div> 

# Comment: this is the code to structure each result sent by the API 
<script type="text/html" id="hit-template"> 
    <div class="product"> 
     <div class="product-title"> 
      <h3>{{title}}</h3> 
     </div> 
     <div class="product-save"> 
     # Comment: where I'd like to replace product_id by the result id 
      <%= link_to "save", product_path(product_id, current_user), method: :post %> 
     </div> 
    </div> 

Wie kann Ich erhalte die ID des Ergebnisses, um sie an das link_to-Tag zu übergeben?

Hier ist das Ergebnis von Algolia gesendet (habe es aus dem Browser), weiß nicht, wie Sie die Ergebnisvariable in der Ansicht/Controller erhalten.

{ 
     "results": 
    [ 
     { 
     "hits": 
     [ 
     { 
      "title":"Product title1", 
      "id":65, 
      "objectID":"344300262" 
     }, 
     { 
      "title":"Product title2", 
      "id":66, 
      "objectID":"344300263" 
     } 
     ] 
    } 
    ] 

Erste Tests:

Von algolia Beispiel (oben in meinem Code sehen) Ich undesrtand, dass ich aufgrund Eigenschaften in den HTML-Code wie folgt abrufen: {{id}}. Aber ich bin mir nicht sicher, was für ein "Objekt" es ist.

Ich kann die ID auf der Seite mit <%= "{{id}}" %> anzeigen. Aber in Ruby als String interpretiert wird {{id}} so kann ich es nicht wie unten verwenden zusammen:

<%= link_to "save", product_path("{{id}}", current_user), method: :post %> 

Außerdem sah ich, dass es eine get_object Methode, die ich auf meinem Index verwenden, können das ganze Algolia Objekt abrufen so: index.get_object("objectID"), objectID ist ein integer.

Aber wie für die ID, ich weiß nicht, wie die ObjektID des aktuellen Ergebnisses angezeigt werden.

Wenn irgendeine Verbesserung für meine Frage benötigt wird, würde ich glücklich sein, es verständlicher zu machen. Sag's mir einfach.

+0

können Sie mir die Ergebnisvariable zeigen, nachdem Ergebnis von Algolia Suche erhalten – Dias

+0

Ich habe den Inhalt von application.js hinzugefügt, und die Antwort von Algolia gesendet (bekam es vom Browser) ist Netzwerk Registerkarte. Aber ich bin mir nicht sicher, wie ich das zum Beispiel nicht aus der Sicht bekommen kann. @Dias – Didoudida

Antwort

0

Sie können dynamische Helfer in Ihrem JavaScript-Code nicht verwenden. Der Grund dafür ist, dass die link_to nur einmal aufgerufen wird, um Server Renderzeit. Wenn die Seite dann geschaltet wird, wurde Ihr Link zu bereits in ein <a>-Tag konvertiert.

Wenn Sie instantsearch.js verwenden, rufen Sie den Server nicht erneut auf, die Seite wird nur mit JavaScript aktualisiert, was bedeutet, dass Sie link_to nicht für jeden Rendervorgang verwenden können.

Allerdings waren Sie tatsächlich auf dem guten Weg mit "{{id}}". Das einzige Problem hier ist, dass die _path Helfer die Parameter umgehen, was sinnvoll ist, wenn Sie Benutzerdaten verwenden, um Ihren Pfad zu generieren, aber in diesem Fall nicht erforderlich ist.

Sie können daher unescape dem erzeugten Pfad, etwa so:

<%= link_to "save", CGI::unescape(product_path("{{id}}", current_user)), method: :post %> 

oder

<%= link_to "save", CGI::unescape(product_path("{{objectID}}", current_user)), method: :post %> 

Allerdings habe ich nicht garantieren, dass die POST-Methode funktioniert, könnten Sie jene rebind müssen <a> Tags auf eine Weise, die mir unbekannt ist.

+0

Danke @Jerska. Das funktioniert und damit auch die POST-Methode. – Didoudida