What ya need there is a bit of templating

Recently, I received an email from someone struggling with HTML, CSS, and JavaScript. Their code, containing HTML placeholders and JavaScript data, wasn't working as expected. The intended behavior was for the JavaScript data to populate the HTML placeholders, a common expectation for beginners.

While experienced web developers readily identify the issue, it's valuable to understand this perspective and offer straightforward solutions.

The Problematic HTML:

<meta charset="utf-8"><title>Test</title><link href="test.css" rel="stylesheet"><div>{company_name}</div>

The Corresponding JavaScript:

var company_data = {
  "{company_name}" : "SOME COMPANY",
};

The code is valid and runs, but it simply displays "{company_name}" because the browser doesn't automatically replace placeholders with JavaScript data.

A Simple Fix (But Not Ideal):

To display "SOME COMPANY," a single line of JavaScript suffices:

var company_data = {
  "{company_name}": "SOME COMPANY"
};

document.querySelector("div").innerHTML = company_data["{company_name}"];

This solution, while functional, lacks reusability and robustness.

The Need for Templating

The user's expectation was that the system would automatically handle templating – replacing HTML placeholders with matching JavaScript keys. This isn't inherent to standard web technologies.

Numerous approaches exist to achieve this. Here are a few:

• Templating Engines: Use a templating engine like Handlebars or Mustache.
• Static Site Generators: Employ a static site generator such as Eleventy (which uses Liquid).
• Custom HTML Templates: Create an HTML <template></template> element and write a script to utilize it.
• Web Components: Build a custom Web Component.
• Server-Side Rendering: Process the templating on the server using a back-end language or a tool like Nunjucks.
• Preprocessors: Use a preprocessor like Pug.

Ideally, templating should occur server-side or during the build process to avoid unnecessary DOM manipulation. However, for illustrative purposes, a client-side example using Handlebars follows:

(The Handlebars example would be inserted here, showing how to use Handlebars to achieve the desired templating.)

The above is the detailed content of What ya need there is a bit of templating. For more information, please follow other related articles on the PHP Chinese website!