"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

Question

"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

To make the actual call, I require something along these lines:

<script id="messagesTemplate" type="text/x-handlebars-template"> 

{{#each messages.messages}}
    {{#each to}}
        {{#ifCond username messages.sessionUserName}}
          <h1>{{username}} is equal to {{messages.sessionUserName}}</h1>
        {{else}}
          <h1>{{username}} is not equal to {{messages.sessionUserName}}</h1>
        {{/ifCond}}
    {{/each}}
{{/each}}

In the database, 'to' consists of an array of documents with a 'username' field that needs to match the messages.sessionUserName in order to render HTML for certain values (e.g. {{#if read.marked}} )

"to" : [
    {
        "user" : ObjectId("53aada6f8b10eb0000ec8a90"),
        "username" : "username1",
        "updated" : ISODate("2014-07-01T19:39:45Z"),
        "_id" : ObjectId("53b30e81b0eff5cb1e2ecb21"),
        "read" : {
            "marked" : true
        }
    }
]

It's important to note that both usernameTest and sessionUserName are added to the end of the res.json() response via express, making them accessible as messages.usernameTest and messages.sessionUserName. However, they are not present in each document - these values are only available in the parent document globally.

res.json({
    messages : messages,
    sessionUserName: req.session.username,
    usernameTest: usernameTest
});

This might explain why the template only renders 'is equal to', but doesn't make sense for the third one:

{{#each messages.messages}}
    <h1>{{usernameTest}} is equal to {{sessionUserName}}</h1>
    <h1>{{../usernameTest}} is equal to {{../sessionUserName}}</h1>
    <h1>{{../messages.usernameTest}} is equal to {{../messages.sessionUserName}}</h1>

Referring to for the custom comparison helper, it seems that the template following {{#ifCond v1 v2}} does not render upper-level scoped elements.

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

The ifCond comparison functions outside of an {{#each}} block:

<script id="messagesTemplate" type="text/x-handlebars-template"> 

{{#ifCond messages.usernameTest messages.sessionUserName}}
  <h1>{{messages.usernameTest}} is equal to {{messages.sessionUserName}}</h1>
{{else}}
  <h1>{{messages.usernameTest}} is not equal to {{messages.sessionUserName}}</h1>
{{/ifCond}}

{{#each messages.messages}}
..

Rendering:

username1 is equal to username1

However, it fails within an {{#each}} block:

{{#each messages.messages}}
    {{#ifCond messages.usernameTest messages.sessionUserName}}
      <h1>{{messages.usernameTest}} is equal to {{messages.sessionUserName}}</h1>
    {{else}}
      <h1>{{messages.usernameTest}} is not equal to {{messages.sessionUserName}}</h1>
    {{/ifCond}}
    ...

Resulting in:

is equal to

Even when using {{../element}}

{{#each messages.messages}}
    {{#ifCond messages.usernameTest messages.sessionUserName}}
      <h1>{{../messages.usernameTest}} is equal to {{../messages.sessionUserName}}</h1>
    {{else}}
      <h1>{{../messages.usernameTest}} is not equal to {{../messages.sessionUserName}}</h1>
    {{/ifCond}}
    ...

Resulting in:

is equal to

javascript express helper handlebars.js

Answer 1

Answer №1

One key aspect to keep in mind is the need to access your top-level scope from deeper levels. I achieved this by creating a custom helper that enhances the standard each block functionality.

Here's the typical Handlebars each block:

    Handlebars.registerHelper('each', function(context, options) {
      var ret = "";

      for(var i=0, j=context.length; i<j; i++) {
        ret = ret + options.fn(context[i]);
      }

      return ret;
    });

All I did was assign 'this' to a property named root and return it with the output. To handle nested loops, I check for the presence of my 'root' property and pass it along if it exists; otherwise, root becomes this.

  Handlebars.registerHelper("myEach", function(context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        if (this.root) {
            root = this.root;
        } else {
            root = this;
        }
        ret = ret + options.fn(_.extend({}, context[i], {
            root: root
        }));
    }


    return ret;
});

Now, regardless of how deeply nested I am within my loops, I can access properties from the root simply by using root.property.

You can find a functional codepen containing a simplified version of your scenario here.

UPDATE: Just five minutes after posting this, I learned about paths in another templating language and discovered that Handlebars also supports paths. This means you don't necessarily need to implement the above solution; you can directly use nested paths in your template like so. Personally, I prefer sticking with the helper approach because I find it cleaner to navigate through root.property rather than including multiple "../" based on your nesting level.

Check out a live demonstration using paths in this example.

<script type="text/x-handlebars-template" id="messages-template">
  Logged in user {{userSession}}
    {{#each messages}}
  <ul>
    <li> Title: {{title}}</li>
    <li> Content: {{content}}</li>
    <li> TO:
      <ul>
        {{#each to}}

        <li>{{user}} {{#ifvalue user ../../userSession}}
        That's me
        {{else}}
        That's not me
        {{/ifvalue}}</li>
      {{/each}}
      </ul>
    </li>
    </ul>

    {{/each}}



</script>

Answer 2

One key aspect to keep in mind is the need to access your top-level scope from deeper levels. I achieved this by creating a custom helper that enhances the standard each block functionality.

Here's the typical Handlebars each block:

    Handlebars.registerHelper('each', function(context, options) {
      var ret = "";

      for(var i=0, j=context.length; i<j; i++) {
        ret = ret + options.fn(context[i]);
      }

      return ret;
    });

All I did was assign 'this' to a property named root and return it with the output. To handle nested loops, I check for the presence of my 'root' property and pass it along if it exists; otherwise, root becomes this.

  Handlebars.registerHelper("myEach", function(context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        if (this.root) {
            root = this.root;
        } else {
            root = this;
        }
        ret = ret + options.fn(_.extend({}, context[i], {
            root: root
        }));
    }


    return ret;
});

Now, regardless of how deeply nested I am within my loops, I can access properties from the root simply by using root.property.

You can find a functional codepen containing a simplified version of your scenario here.

UPDATE: Just five minutes after posting this, I learned about paths in another templating language and discovered that Handlebars also supports paths. This means you don't necessarily need to implement the above solution; you can directly use nested paths in your template like so. Personally, I prefer sticking with the helper approach because I find it cleaner to navigate through root.property rather than including multiple "../" based on your nesting level.

Check out a live demonstration using paths in this example.

<script type="text/x-handlebars-template" id="messages-template">
  Logged in user {{userSession}}
    {{#each messages}}
  <ul>
    <li> Title: {{title}}</li>
    <li> Content: {{content}}</li>
    <li> TO:
      <ul>
        {{#each to}}

        <li>{{user}} {{#ifvalue user ../../userSession}}
        That's me
        {{else}}
        That's not me
        {{/ifvalue}}</li>
      {{/each}}
      </ul>
    </li>
    </ul>

    {{/each}}



</script>

"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

Answer №1

Similar questions

Codeigniter code to retrieve dynamic data in a select box

Tips for gently scrolling instead of quickly scrolling all at once

View an image in advance of uploading it and concealing any broken images

The Express.js main router is functioning properly, however, the other routers connected to it are experiencing

What is the solution for the error message "Unhandled Runtime Error" with the description "TypeError: videoRef.current.play is not a function"?

JavaScript was unable to locate the requested URL on the server

Implement a button transformation upon successful completion of a MySQLi update using AJAX

Transform the React.js class poll component into a React Hooks poll component

The catch block seems to be failing to capture the errors thrown by the fetch API

What is the best way to animate the preprending of a div in an AJAX response?

Issue with Browsersync causing task to malfunction in Gulp 4

The Navbar in my React Material UI app is being covered by the Drawer component. Can someone guide me on how to fix

ng-include not functioning properly within ng-table

What drawbacks should be considered when utilizing meteor.js for development?

Tips for organizing dynamic table data following an append operation

How can DataTables (JQuery) filter multiple columns using a text box with data stored in an array?

Ensuring no null objects are present in the jQuery each function

Trigger Vue to scroll an element into view once it becomes visible

The sendKeys() method is malfunctioning in Selenium WebDriver

The mdSidenav service encounters difficulties locating a component within an Angular component