Expressjs, Handlebars(hbs), express-messages, flash-connect. Not able to render flash messages

I’m doing an express app and I’d like to show flash messages when a user registers using a form.

The technologies that I’m using are Node.js, Express.js, Handlebars(hbs), connect-flash and express-messages.

In order to be easier to find the error, I’ve created a new app in the simplest way that I could.

The error is:
Error: /Applications/MAMP/htdocs/hbs-simple/views/index.hbs: Parse error on line 7:
...</head><body> {{{messages()}}} {{{b
---------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'

Project structure:

├── app.js
├── package.json
└── _views
    ├── index.hbs
    ├── layout.hbs
    └── test.hbs

app.js:

const express = require('express');
const app = express();
const path = require('path');
const session = require('express-session');
const flash = require('connect-flash');
const hbs = require('hbs');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(require('connect-flash')());
app.use((req, res, next) => {
  res.locals.messages = require('express-messages')(req, res);
  next();
});

// Handle Sessions
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}));

app.get('/', (req, res, next) => {
  req.flash('success', 'Rendering index...');
  res.render('index');
});

app.get('/test', (req, res, next) => {
  req.flash('success', 'Rendering test...');
  res.render('test');
});

app.listen(3000, function () {
  console.log('Listening on port 3000!');
});

layout.hbs

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  {{{messages()}}}
  {{{body}}}
  <a href="/">index</a>
  <a href="/test">test</a>
</body>
</html>

index.hbs

<h3>This is the index</h3>

test.hbs

<h3>This is the index</h3>

package.json

{
  "name": "hbs-simple",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Rafa",
  "license": "ISC",
  "dependencies": {
    "connect-flash": "^0.1.1",
    "express": "^4.15.3",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.3",
    "hbs": "^4.0.1",
    "path": "^0.12.7"
  }
}

This is from the express-messages documentation that you can find on [https://github.com/expressjs/express-messages][1]

Rendering Messages

Call the messages() function as specified by your rendering engine:

EJS:

<%- messages() %>
Jade:

!= messages()

Which using hbs should be {{{messages}}} , but this doesnt work as I expected.

Any ideas or any solution for this situation.

Thanks a lot!


Source: stackoverflow-javascript

How to load multiple templates with HandlebarJS

I am currently building a small Handlebars.js application. I have no prior experience and as I’m learning as I’m going along, I’ve been running in to a few issues.

My first issue is loading templates.

Currently I have functions like this for every single template I need to load

var populateDocs = function() {
   var srcContent = $( '#docs-template' ).html(),
        contentTemplate = Handlebars.compile( srcContent ),
        htmlContent = contentTemplate( content.getItem( 'docs' ) );

        $( '#docs' ).append( htmlContent );
};

I am reading templates from a content.json file so once this file is ready, I call multiple functions to populate each template.

content.onReady(
    function() {
        populateFooter();
        populateHomework();
        populateDocs();
        populateContact();
        generateTabs();
    }
);

My question is. Is there a way I can load all these templates without having to call each function for each template?


Source: stackoverflow-javascript

Webpack – compile handlebars and output html

I’m starting out with webpack and already managed to get all my development setup in webpack. Only thing that left is compiling handlebars files and emitting static html files.
Specifically I want to watch for changes in any file in ‘./src/templates/*.hbs’ compile and emit html in ‘./public/[name].html’.

Thanks for any advice.


Source: stackoverflow-javascript

Making a Handlebars Template from a Firebase JSON

I have a handlebars template that worked fine using the old fashioned XMLHttpRequest to get the JSON array from https://learnwebcode.github.io/json-example/pets-data.json. Below is the working code for that. But my JSON from Firebase looks different, like this: http://pastebin.com/JaYVVzwN. Every entry of mine also has a key, while the LearnWebCode JSON is just an array. Mine is also missing the parent key (‘Projects’), which further complicates the transition. I’m thinking it might be due to the line with const dbRefObject = firebase.database().ref().child('Projects'); (see the very bottom where I post my attempted javascript)

handlebars-project.js: Old-fashioned XMLHttpRequest

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/pets-data.json');
ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
        var data = JSON.parse(ourRequest.responseText);
        createHTML(data);
    } else {
        console.log("We connected to the server, but it returns an error.");
    }
};

ourRequest.onerror = function () {
    console.log("Connection error");
};

ourRequest.send();

function createHTML (petsData) {
    var rawTemplate = document.getElementById("petsTemplate").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(petsData);

    var petsContainer = document.getElementById("pets-container");
    petsContainer.innerHTML = ourGeneratedHTML;
}

And here’s the working HTML/Handlebars code:

card-handlebars.php: Basic template I want to use (it makes a little card. I want a lot of these, one for every item under the Projects key from the Firebase JSON)

Now I want to switch that first handlebars-project.js code over to using firebase instead.

To be clear, I want my page to be populated with a bunch of these cards (I’m using Semantic UI) for every item under the Projects key (Project-1, Project-2, Project-3, etc.) from a single Firebase fetch. It’s already being stringified to JSON. I want the looping to stay in handlebars (HTML), not in the javascript. And this isn’t using Node.js.

Here’s a look at my actual Firebase table:

Firebase
Here’s my attempt at the javascript:

handlebars-firebase-project.js: Not working. This is where the crux of the whole issue is. It should be a simple fix but I’m no JS expert.

(function() {

  // https://www.gstatic.com/firebasejs/3.7.1/firebase.js

  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAC1MEF59loMVRA7zyaMhn6uHrp4i2OPNw",
    authDomain: "website-171c8.firebaseapp.com",
    databaseURL: "https://website-171c8.firebaseio.com",
    storageBucket: "website-171c8.appspot.com",
    messagingSenderId: "642759134369"
  };
  firebase.initializeApp(config);

  //Create references
  const dbRefObject = firebase.database().ref().child('Projects');

  //Sync object changes (HTML)
  dbRefObject.on('value', snap => {

    var rawTemplate = document.getElementById("petsTemplate").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(JSON.stringify(snap.val(), null, 3));

    var petsContainer = document.getElementById("pets-container");
    petsContainer.innerHTML = ourGeneratedHTML;

  });

}());


Source: stackoverflow-javascript