i-for

i-for Directive

The i-for directive is used for rendering a list of items based on an array or object. It allows you to iterate over a collection and generate DOM elements for each item.

Syntax

<element i-for="item in items" i-key="uniqueKey">
  <!-- Template for each item -->
</element>

• item: The alias for the current item being iterated.
• items: The collection (array or object) to iterate over.
• i-key: (Optional) A unique identifier for each item, used for efficient updates.

Usage

Basic Usage

<ul>
  <li i-for="fruit in fruits">{ fruit }</li>
</ul>

createApp({
  data: {
    fruits: ['Apple', 'Banana', 'Cherry']
  }
}).mount('#app');

Using Index

You can also access the index of each item:

<ul>
  <li i-for="(fruit, index) in fruits">{ index + 1 }: { fruit }</li>
</ul>

Using with Objects

When iterating over objects, you can access both the key and value:

<ul>
  <li i-for="(value, key) in user">{ key }: { value }</li>
</ul>

createApp({
  data: {
    user: {
      name: 'John Doe',
      age: 30,
      city: 'New York'
    }
  }
}).mount('#app');

Using i-key for Optimized Rendering

When dealing with dynamic lists, it's recommended to use the i-key directive to provide a unique key for each item. This helps the framework efficiently update the DOM when the list changes.

<ul>
  <li i-for="item in items" i-key="item.id">{ item.name }</li>
</ul>

createApp({
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
}).mount('#app');

TIP

• The i-for directive creates a new scope for each iteration, so you can use item properties directly within the template.

• You can use i-for with any valid JavaScript expression that returns an iterable.

• When using i-for, it's a good practice to provide a i-key attribute for better performance, especially when dealing with dynamic lists.

• The i-for directive can be combined with other directives like i-if for more complex rendering logic.

Example: Nested i-for

Basic Setup

import {createApp} from "//unpkg.com/olova"

const app = createApp({
  // Application configuration
})

app.mount("#root")

The createApp function is imported from the Olova framework and used to create a new application instance. The application is then mounted to a DOM element with the id "root".

Data Structure

data: {
  categories: [
    {
      id: 1,
      name: 'Electronics',
      products: [
        { id: 101, name: 'Laptop', price: 999 },
        { id: 102, name: 'Smartphone', price: 699 }
      ]
    },
    // More categories...
  ]
}

The data property contains a categories array, where each category has an id, name, and a nested products array.

Computed Properties

computed: {
  categoryList() {
    return this.categories.map(category => {
      const productList = category.products.map(product => 
        `<li>${product.name} - $${product.price}</li>`
      ).join('');
      return `<li>${category.name}<ul>${productList}</ul></li>`;
    }).join('');
  }
}

The categoryList computed property is used to generate an HTML string representation of the nested list structure. It iterates over the categories and their products, creating list items for each.

Template

template: `
  <ul i-html="categoryList"></ul>
`

The template uses the i-html directive to insert the HTML string generated by the categoryList computed property into the DOM.

Key Points

• Nested Rendering: This approach allows for rendering nested lists when the framework doesn't support nested i-for directives.

• HTML Generation: The HTML structure is generated in JavaScript using string interpolation and array methods.

• Computed Property: The categoryList computed property is responsible for transforming the data into an HTML string.

• i-html Directive: The i-html directive is used to insert the generated HTML into the DOM.

Considerations

• Security: Be cautious when using i-html with data from untrusted sources, as it could lead to XSS vulnerabilities.

Conclusion

This method provides a workaround for rendering nested lists in Olova when direct nested i-for directives are not supported. It leverages computed properties and the i-html directive to achieve the desired nested structure.