Using handlebars.js for dynamic user content?

Question

Handlebars is commonly used on static predefined html templates and then given dynamic data via JSON, but what if the template itself comes from json?

I'm trying to build a community forum whereby I have a template that gets filled in for where the users post goes. The post itself however also contains template information (which is dynamic). How can I get handlebars to process a dynamic template that just came out of ajax?

For example, a users post can contain any or all of the following in any order: text, pictures, links, videos, etc.

The content will look something like this:

{{text-open}} blablabla heres a picture {{text-close}}{{image-open}}
http://someRandomUrl.com {{image-close}} {{image-open}}
http://anotherRandomUrl {{image-close}}

I'm not sure how to do this with handlebars. I have the feeling maybe I should just use a string replace function? But would that be the optimal method?

Answer 1

You just have to compile the template:

fetch("post.hbs")
    .then(source => Handlebars.compile(source))
    .then(postTemplate => {
        // Do stuff, then fill the template:
        postElement.innerHTML = postTemplate(postData);
    });