Introduction to Jinja-JS

Jinja-JS is a powerful templating engine designed to streamline the creation of HTML content in JavaScript applications. Inspired by the popular Python-based Jinja engine, Jinja-JS offers a robust set of features that enhance the development process with flexibility and efficiency. Let’s dive into some of the most useful APIs that Jinja-JS has to offer.

API Examples

1. Simple Template Rendering

Render a basic template with variables:

  const template = Jinja.compile('Hello, {{ name }}!');
  const output = template.render({ name: 'World' });
  console.log(output); // Output: Hello, World!

2. Looping Constructs

Use loops to iterate over arrays:

  const template = Jinja.compile(`
    

      {% for item in items %}
        
{{ item }}
      {% endfor %}
    
  `);
  const output = template.render({ items: ['Apple', 'Banana', 'Cherry'] });
  console.log(output);
  // Output: 
  // 

  //   
Apple
  //   
Banana
  //   
Cherry
  // 

3. Conditional Statements

Render content conditionally:

  const template = Jinja.compile(`
    {% if user.isAdmin %}
      
Welcome, Admin!
    {% else %}
      
Welcome, User!
    {% endif %}
  `);
  const output = template.render({ user: { isAdmin: true } });
  console.log(output); // Output: 
Welcome, Admin!

4. Filters

Apply filters to transform data:

  const template = Jinja.compile('{{ text | capitalize }}');
  const output = template.render({ text: 'hello world' });
  console.log(output); // Output: Hello world

App Example Integrating Multiple APIs

Here’s a comprehensive example that integrates multiple Jinja-JS APIs to create a dynamic application:

  const userTemplate = Jinja.compile(`
    

      
{{ user.name | capitalize }}
      {% if user.isAdmin %}
        Admin
      {% endif %}
      

        {% for activity in user.activities %}
          
{{ activity | capitalize }}
        {% endfor %}
      
    
  `);

  const users = [
    { name: 'john', isAdmin: true, activities: ['manage users', 'edit content'] },
    { name: 'jane', isAdmin: false, activities: ['view content', 'comment'] }
  ];

  users.forEach(user => {
    const userCardHtml = userTemplate.render({ user });
    document.body.innerHTML += userCardHtml;
  });

This example demonstrates creating user cards with conditional admin badges, looping through activities, and applying filters to format the content. By leveraging the power of Jinja-JS, you can build highly dynamic and maintainable JavaScript applications.

Start using Jinja-JS today to elevate your JavaScript templating experience!

Hash: cfc76e4aafd17a06796e1810b9088b273afae06ec277f665ed4569f294a25e55