Gravatar for jschjolberg@awareweb.com

Question by jschjolberg, Jun 16, 2014 1:03 PM

Can you add logic to Underscore.js templates?

We're using the JavaScript Search Framework along with the Underscore.js templates. I'm wondering if there is a way to add logic inside the template code. Can you put an if statement inside of there to display things differently based on values of the results?

Gravatar for apare@coveo.com

Comment by Alexandre Paré, Jun 16, 2014 1:05 PM

<%= condition?true:false %>

2 Replies
Gravatar for vseguin@coveo.com

Answer by Vincent Séguin, Jun 16, 2014 1:11 PM

Hi,

Of course. For example, let's say you want to display a different elements based on a field called 'ItemType'. I have this small markup example here :

    {{ if (raw.<%= ToCoveoFieldName("ItemType", false) %> === "Destinations") { }}
    <div class='left-picture'></div>
    <div class="CoveoResultContent CoveoResultContentWithPicture"></div>
    {{ else { }}
    <div class="CoveoResultContent"></div>
    {{ } }}

Basically i'm using the ItemType field to display different markup elements. Then, those elements will be stylized with CSS.

Gravatar for jschjolberg@awareweb.com

Comment by jschjolberg, Jun 17, 2014 8:56 AM

Thank you - this worked great.

Gravatar for olamothe@coveo.com

Answer by olamothe, Jun 16, 2014 1:11 PM

Yes, absolutely. You can put and execute any valid JavaScript code inside underscore template (store variable, execute function etc.) Just place your code to execute inside {{ }}

<script>
  {{ if (raw.somefield) { }}
   <div> {{- raw.somefield }} </div>
  {{ } else { }}
  {{- //output something else }}
  {{ } }}
  //etc.
<script>

Underscore documentation

Gravatar for vseguin@coveo.com

Comment by Vincent Séguin, Jun 16, 2014 1:11 PM

This is example wouldn't work in a Sitecore context though, because of the tags that would be misinterpreted by ASP.NET :)

Gravatar for olamothe@coveo.com

Comment by olamothe, Jun 16, 2014 1:15 PM

I edited my answer to use the {{ }} tags. Didn't know it was used inside Sitecore :)

Gravatar for apare@coveo.com

Comment by Alexandre Paré, Jun 16, 2014 1:15 PM

indeed in the js search we added the brace alternative to support the ASP.NET

Gravatar for jschjolberg@awareweb.com

Comment by jschjolberg, Jun 17, 2014 8:56 AM

Thanks - this helped me out.

Gravatar for ssartell@rightpoint.com

Comment by ssartell, Oct 22, 2016 12:14 PM

While you can inject server-side variables into your Underscore templates in your Razor files, I wouldn't conflate Underscore templates with MVC. Underscore is a client-side templating tool where MVC is all server-side. That said, I'm assuming the {{- raw.xxxx }} was just a typo and you meant to use an equals sign there. That rest of the syntax should work fine assuming message is actually a property on the raw object of your result.

I'd recommend using your browsers dev tools to figure out what's going on here. Either you can look at the XHR results coming back via the network tab, or you can debug the templates directly to find out what the values you have available are. To do that just drop {{ debugger }} on a line in your template and have your browser dev tools open when you refresh. Then you should be able to figure out what is available to use in your templates.

Gravatar for flguillemette@coveo.com

Comment by François Lachance-Guillemette, Oct 24, 2016 8:00 AM

@ssartell

I converted the question your tried to answer to a question and could not get your comment to follow it. Could you please add your answer here: https://answers.coveo.com/questions/7697/access-javascript-variable-from-underscore-template-in-mvc

Gravatar for ssartell@rightpoint.com

Comment by ssartell, Oct 24, 2016 9:44 AM

@flguillemette, thanks for letting me. I've copied it over.

Ask a question