CODEWITHSUNDEEP
javascripthandlebars.js
peterkr
peterkr

Reputation: 421

Handlebarjs removing white space handling, but need to keep one after a word

I am using HandlebarsJS 3.0 with the Marionette framework and have used ~ symbol to remove unwanted whitespaces/newlines. But the output is not expected, with following example code:

<h3>Total
{{~#if mod}}
{{mod}}
{{~else~}}
Modal
{{~/if~}}
</h3>

Is it possible to add a single space after each word?

Updated: If I remove ~ from else statement, result as below: is it possible to avoid white space between spaces?

enter image description here

Upvotes: 1

Views: 1715

Answers (2)

Sebastien Daniel
Sebastien Daniel

Reputation: 4778

I've had to remove whitespace / compress my Handelbar templates before. I've been running this task for quite some time (however I pre-compile my templates), we basically compress our template strings through this function:

function compressHB(content) {
    "use strict";
    return content.replace(/\s{2,}/g,"").replace(/\n/g,"").replace(/\t/g,"");
}

It's removes any continuous spaces, line breaks and tabs. If you have double spaces between words, it will remove all space between them, so you have to make sure you don't have extra spaces (typos).

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48693

I fixed the issue with your space, by removing the left tilde from the if-condition and adding a space after "Total".

If you do not want any leading nor trailing spaces, you will have to put the whole template on one line.

createTplNode(document.body, parseTpl('#modal'), {
  mod: false
});

function parseTpl(selector) {
  return Handlebars.compile(document.querySelector(selector).innerHTML);
}

function createTplNode(parent, tpl, data) {
  var el = document.createElement('DIV');
  parent.appendChild(el);
  el.outerHTML = tpl(data);
  return el;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>

<script id="modal" type="text/x-handlebars-template">
  <h3>Total {{#if mod}}{{mod}}{{~else~}}Modal{{~/if~}}</h3>
</script>

Upvotes: 0

Related Questions