Handlebars If the length of variable is more than

I'm currently working on creating email templates using Foundation email and Handlebars. My goal is to display certain headings based on the data passed to the component, but I haven't been successful so far. Can you help me identify what I am doing incorrectly here?

heading-1.html

<h1>{{text}}</h1>

paragraph.html

<row class="card">
    <columns>
        <wrapper class="inner-padding">
            {{#if (eq heading-1.length > 0)}}
                {{> heading-1 text="Test"}}
            {{else}}
                <h1>failed</h1>
            {{/if}}
            <p>
                {{text}}
            </p>
        </wrapper>
    </columns>
</row>

index.html

<container>
  <row>
    <columns class="content">
      {{> paragraph
        heading-1="test"
        text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorem molestias nam odit suscipit velit.
        Ab aliquam at autem dignissimos dolorum ipsam magnam molestiae officia, quae quo, veniam veritatis voluptatibus?"
      }}
    </columns>
  </row>
</container>
javascripthandlebars.jszurb-foundation

Answer №1

Implement a custom Handlebars helper function:

Handlebars.registerHelper('checklength', function (text, length, options) {
'use strict';
   if (text.length > length) {
     return options.fn(this);
  }
  return options.inverse(this);
});

Example of how to use this helper function:

{{#checklength Title 0}}   //Title is the text and 0 is the expected length
             <p>Heading</p>
      {{else}}
             <h1>failed</h1>
      {{/checklength}}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error loading GLTF file

I'm having trouble displaying a GLTF model using three.js. If someone could help me identify the issue in my code, I would greatly appreciate it. import {GLTFLoader} from "./GLTFLoader.js"; var scene = new THREE.Scene(); ...

javascriptthree.jsblender

Using AJAX in Classic ASP to submit a form via a POST request

My code in TEST.ASP looks like this: <HTML> <HEAD> <SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT> </HEAD> <BODY> <FORM action="action_page.asp" method="post"> First Name:<BR> ...

javascriptajaxformspostasp-classic

Adjust the text size within a div element

I'm having trouble adjusting the font size of the bodytext div. When using the code snippet below on a page with various formatting styles, and nested inside a <div id="bodytext">, it doesn't seem to work as intended. It ends up altering li ...

javascriptjqueryhtmlcssfont-size

Tips for displaying a specific PDF file using the selected programming language

As a newcomer to react.js, I have a question regarding my system which allows the user to select the default language. If the chosen language is French, there is a specific URL that needs to be included in the Iframe path. For Spanish, it's a specific ...

javascriptreactjs

Concealment vs Deletion of DOM components

Conceal or Erase When dealing with changing DOM elements, is it better to hide them or delete them? Consider that the environment may change frequently and that elements can have various event callbacks. Hide: What is the best approach when hiding eleme ...

javascriptjquerycssoptimization

The email link with a computed property is failing to display the entire message content

When creating a mailto link, I have encountered an issue where the email body is being cut off at around 200 characters, even though my total email length is 1500 characters. This happens despite being below the mailto limit. To address this problem, I hav ...

javascriptvue.jsmailto

Arrange divs on the screen in a specific formation

I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows: 0 0 0 0 0 0 0 0 0 0 My aim is to achieve this using jQuery on a mobile ...

javascriptjqueryhtmlcssionic-framework

Passing a textbox's value through an AJAX call from a ServerSide datatable in MVC5

I am encountering an issue with my server-side data-table. After making an ajax call, the value from the text box is not being sent - instead, it is sending an empty value. However, everything works fine when I pass static data. Here is the code that wo ...

javascriptc#jqueryajax

Tips on gathering information from an HTML for:

After encountering countless programming obstacles, I believe that the solution to my current issue is likely a simple fix related to syntax. However, despite numerous attempts, I have been unable to resolve it thus far. I recently created a contact form ...

javascripthtmlnode.jsjsonexpress

What is the reason for the absence of Duplex Stream in the Web Streams API?

I have experience working with the traditional nodejs stream, which makes the need for Duplex streams quite evident. These are streams that can both read and write data, like net.Socket. As mentioned here Examples of Duplex streams include: TCP sockets ...

javascriptnode.jsstreamwhatwg-streams-api

Avoid inputting various symbols into the select2 field

I recently upgraded my select input to use select2: <select id="indivCitizen" multiple="multiple"> <option value=""></option> </select> To fetch data dynamically and enhance user experience: $(doc ...

javascriptjquerysqljquery-select2sql-injection

The stream.write function cannot be executed as a callable expression

Struggling to create a function that accepts either a writable stream (createWriteStream) or process.stdout/.stderr in TypeScript, but encountering an error. import { createWriteStream, WriteStream } from 'fs' const writehello = (stream: NodeJS. ...

javascriptnode.jstypescriptnodejs-stream

Embrace the D3js Force Layout barrier and dive right in

Currently, I am working on a force layout project. My main objective is to enable the nodes to avoid a particular div element placed in the center without utilizing gravity within the SVG. I have already implemented collision detection and bounding within ...

javascriptcssd3.jssvg

How can I utilize a callback in TypeScript when working with interfaces?

Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...

javascripttypescript

Using createContext in React.tsx to pass the state through useState

There is a context called Transaction that accepts an object and a function as parameters. In the AppProvider component, the Transaction.Provider is returned. The following code snippet is from the GlobalState.tsx file: import { createContext, useState } f ...

javascriptreactjstypescripterror-handling

Save the environment value within Vue when the app starts up

When working with a basic web app created using VueJS, the application makes an API call that returns an object containing the environment name. For instance: https://appsdev/mysimpleapp/api/environment returns {"applicationName":"My S ...

javascriptnode.jsvue.jswebpackvue-cli

Leveraging useEffect and useContext during data retrieval

I'm currently in the process of learning how to utilize React's Context API and Hooks while working on a project that involves using fetch(). Although I am able to make the request successfully, I encounter an issue where I can't retrieve t ...

javascriptreactjsnext.js

In React, the state's value will revert back to its initialState whenever a new value is assigned

My App component has a simple functionality where it controls the state of a value to display a header. By using an onClick function, I'm updating the isHeaderVisible value to True in the Home component when a logo is clicked and another route is take ...

javascriptreactjstypescript

A guide on how to view material.resolution in Three.js

I've been following a tutorial and I'm attempting to create a thick line using different coordinates. https://github.com/leighhalliday/google-maps-threejs/blob/main/pages/car.js But I've encountered an issue in my code: trackRef.current.mat ...

javascriptthree.js

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml