Instantsearch.js: Meteor templating(Blaze) won't work inside widgets

[yonidejene]

I got the tutorial code to work by using a Mustache String template(see below) and now I want to include a Meteor template inside the hits div but it does not work. Specifically, I want to include an "add to shopping cart" button right below the description but I cannot use Meteor templates inside the hits div so I can't add a button. Can you please help?

Here is the code for my main.js:

Here is the code I am using for the {{test}} template helper. It just returns the string "test" when {{test}} is called:

[vvo]

Hi @yonidej, instantsearch.js is not compatible with blaze templating.

Unfortunately it seems plugging meteor.js and instantsearch.js together is not easy since meteor.js has its own reactivity system (Tracker) plugged to its templating engine.

In the meantime, I would recommend you to stick with hogan templating and hogan helpers as shown in our documentation: https://community.algolia.com/instantsearch.js/documentation/#helpers

If you happen to mix meteorjs templates and instantsearch.js, let me know.

[yonidejene]

Do you think I would run into problems if I used React for my view layer instead of Blaze?

For example, if I want to add a shopping cart button to the instantsearch demo, can I render a React component inside the hit widget?

[vvo]

For now, untill we make instantsearch-react (this is currently being worked on), I advise you if you need to add a "add to cart" button to add it into your hits template and then if you need to bind an action on it, either use the old time onClick=window.action OR use event delegation https://davidwalsh.name/event-delegate

If you have any idea on how to make instantsearch.js better integrate with meteor.js templating I would be happy to know them!

Let me know if the dirty solution works for now

[yonidejene]

Unfortunately, Meteor uses template based routing. So, when I try to insert the widgets, I always get this type of error: utils.js:79Uncaught Error: Container must be "string" or "HTMLElement". Unable to find #hits

Any solutions you can think of?

I've tried everything I could think of and nothing worked.

[vvo]

@yonidej Uncaught Error: Container must be "string" or "HTMLElement". Unable to find #hits really means that at the moment this line was executed, there was no div named id="hits". This is the first thing you would have to fix

[yonidejene]

@vvo I tried changing the order in which the DOM was rendered but it doesn't mesh well with Blaze.

I just checked out instantsearch-react and it looks like it's coming out July. So, I'll wait for that!

[vvo]

Ok nice

[thomasspiesser]

I haven't tested this thoroughly, but I have used Blaze to at least render the hits template like this:

Template.someTemplate.onRendered( function() {
  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      hitsPerPage: 10,
      templates: {
        item: (data) => Blaze.toHTMLWithData(Template.yourPreviewTemplate, data),
        empty: Blaze.toHTML(Template.noResults)
      }
    })
  );
});

Seems to be working alright.

[vvo]

Thanks!