Dynamic content in webflow (django templates/handlebars/...)

Community resources General
1

I am trying to figure out the best workflow to use for my team structure. My team is comprised of the following:

  • designer
  • backend developers

I want my designer to create websites in Webflow and have the backend developers add dynamic database-driven content (the Webflow CMS is not appropriate in our context). I would like the designer to continue owning the front-end. In other words, front-end changes are only made in Webflow. In order to implement dynamic content, I will need some sort of templating engine (e.g. Django templates, handlebars, etc). Please note that a templating engine is different from an HTML template (I noticed that there was some confusion about this in previous questions on this forum).

I don’t think a backend templating engine such as Django templates, Jinja, Ruby on Rails, etc. is appropriate in this case because the HTML that is exported from Webflow needs to be altered. This means that the designer is no longer able to make further edits to the HTML after it is integrated with these templates.

This leaves us with front-end templating engines such as Mustache and Handlebars. Trivial substitutions such as

and
{{ myvariable }}
are possible using custom attributes and embeds. Loops and control structures are not:

{{ if condition }}
<h1>Hello World</h1>
{{ else }}
<h1>Goodbye World</h1>
{{ endif }}

cannot be created because Webflow wraps embeds in div tags. The output from Webflow would look something like this:

{{ if condition }}

Hello World


{{ else }}

Goodbye World


{{ endif }}

This is not useful because the closing

will incorrectly be replicated in the conditional block.

The only way I think this is possible to use some sort of custom javascript processing. For instance:

<div class="w-container">
    <div class="names">
      <div class="name">{{ name }}</div>
    </div>
  </div>
  <script>
      var names = ["New York", "New Delhi", "New England"];
      var container = document.querySelector(".names");
      var clone_element = document.querySelector(".name");

      for (idx in names) {
          var name = names[idx]
          var new_element = clone_element.cloneNode(true);
          container.append(new_element);

          var new_text = new_element.textContent.replace("{{ name }}", name);
          new_element.textContent = new_text;
      }
  </script>

This question has been asked many times on this forum but I don’t think a satisfactory answer has been given. Am I correct, is my approach in the last example the only way to achieve this? The separation of concerns works and requires only minimal javascript to make it work. It isn’t awful, but it is certainly not pretty.

Has anyone discovered a better solution?

1 Like