Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

Question

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

I've hit a roadblock trying to solve this issue. My goal is to incorporate hogan.js (via hogan-express) into a new expressjs application while also utilizing hogan.js on the front-end with Backbone, lodash, and other tools.

The layout I am using consists of:

    ...
    {{> header }}
    {{{ yield }}}
    {{> footer }}
    ...

At the bottom of the layout, there is:

    <script type="text/template">
        {{> template }}
    </script>

For now, the content within those delimited entries is managed by hogan-express. However, the template inserted in the {{> template }} call contains its own delimited entries as shown below:

    <section>{{name}}</section>

I want these specific delimiters to be ignored by hogan-express so that hogan on the front-end can handle them instead.

I don't mind adjusting the delimiters for hogan-express. I attempted this change which worked, but it resulted in breaking the {{{ yield }}} call. I experimented with using <% %> as delimiters and modifying the yield to something like <%{ yield }%> (along with different variations), but none of my attempts were successful.

Does anyone have any suggestions on how I can implement custom delimiters in hogan-express without disrupting 'yields'?

Thank you!

javascript express hogan.js

Answer 1

Answer №1

I encountered a similar issue to yours and struggled to find a straightforward solution. Eventually, I decided to merge various suggestions to make it work effectively. In my case, I opted for a combination of hogan-express and hogan-express-partials.

Implement the advice provided above regarding app.locals

app.set('views', config.root + '/server/views');
app.enable('view cache');
app.set('view engine', 'html');
app.locals.delimiters = '<% %>';
app.set('layout', 'layout');
app.set('partials', { nav: 'nav', footer: 'footer' });
app.engine('html', hoganExpress);
app.use(partials.middleware());

Personally adjust the yield interpolation within your main template. Note that I had to temporarily change the delimiters to use the default ones.

<%> nav %>

<div class="container">

    <!-- Switch to original delimiters -->
    <%={{ }}=%>
    {{{ yield }}}

    <!-- Revert back to non-conflicting delimiters with Angular -->
    {{=<% %>=}}

</div>

<%> footer %>

The setup seems functional, but I'm not completely satisfied with it. I explored solutions closely resembling yours, yet one peculiar aspect I noticed in the hogan.js library was the potential usage of an ampersand (&) with the tripleStash, although I struggled to make it function correctly.

Answer 2

I encountered a similar issue to yours and struggled to find a straightforward solution. Eventually, I decided to merge various suggestions to make it work effectively. In my case, I opted for a combination of hogan-express and hogan-express-partials.

Implement the advice provided above regarding app.locals

app.set('views', config.root + '/server/views');
app.enable('view cache');
app.set('view engine', 'html');
app.locals.delimiters = '<% %>';
app.set('layout', 'layout');
app.set('partials', { nav: 'nav', footer: 'footer' });
app.engine('html', hoganExpress);
app.use(partials.middleware());

Personally adjust the yield interpolation within your main template. Note that I had to temporarily change the delimiters to use the default ones.

<%> nav %>

<div class="container">

    <!-- Switch to original delimiters -->
    <%={{ }}=%>
    {{{ yield }}}

    <!-- Revert back to non-conflicting delimiters with Angular -->
    {{=<% %>=}}

</div>

<%> footer %>

The setup seems functional, but I'm not completely satisfied with it. I explored solutions closely resembling yours, yet one peculiar aspect I noticed in the hogan.js library was the potential usage of an ampersand (&) with the tripleStash, although I struggled to make it function correctly.

Answer 3

Answer №2

In order to address this issue within the realm of Express.js 4.x, I implement the following solution:

app.locals.delimiters = '<% %>';

To execute this fix, simply insert the above code snippet into your app.js file after the lines:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

Answer 4

In order to address this issue within the realm of Express.js 4.x, I implement the following solution:

app.locals.delimiters = '<% %>';

To execute this fix, simply insert the above code snippet into your app.js file after the lines:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

Answer 5

Answer №3

If you're looking for a solution, one option is to adjust the delimiters in your templates Mustache-style and leave yield as it is. You can find more information on how to set delimiters here:

For example, in your template:

{{=<% %>=}}
<section><% name %></section>
<%={{ }}=%>

While this method may be a bit outdated, it could still be useful for someone facing a similar issue.

Answer 6

If you're looking for a solution, one option is to adjust the delimiters in your templates Mustache-style and leave yield as it is. You can find more information on how to set delimiters here:

For example, in your template:

{{=<% %>=}}
<section><% name %></section>
<%={{ }}=%>

While this method may be a bit outdated, it could still be useful for someone facing a similar issue.

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

Answer №1

Answer №2

Answer №3

Similar questions

The validation using regex is unsuccessful when the 6th character is entered

When dragging a new connection in jsPlumb, the existing one should be automatically removed

What's the importance of including (req, res, next) in the bodyParser function within Express?

Exploring the world of web development with JavaScript and the randomization magic

Transform the javascript ES6 class into a functional programming approach

Setting the CSS position to fixed for a dynamically generated canvas using JavaScript

retain the input data from the form by using the keyup event

Creating crawlable AMP versions of Angular websites

Preserving the <script> tag when defining HTML code

Transfer the data from an XML element to generate a fresh element with an integrated value

Unlimited Caching: A Guide to Storing HTTP Responses permanently

What is the proper method for submitting a mail form via AJAX without using jQuery?

Combining plugin setups and functionalities into a unified script

Tips on how to retrieve a variable from an array in Vue JS

What is the best way to expand a jade layout using a view/parent/child hierarchy?

v-autocomplete no selected option

Steps for implementing AJAX to display a success function and update database results in real-time

Different body background color changes every second

What is the process for executing PhantomJS commands through a NodeJs server?

limitations on passing url parameters in react.js