List Rendering

Basic List Rendering

dbind_repeat

Repeat an element for each item in an array.

<div dbind_repeat="items">
  <h3 dbind_data="name"></h3>
  <p dbind_data="description"></p>
</div>

The first child serves as the template and is cloned for each item.

Filtering

dbind_filter

Filter items based on field values.

<!-- Show only active items -->
<div dbind_repeat="products" dbind_filter="status:active">
  <span dbind_data="name"></span>
</div>

<!-- Show items in specific category -->
<div dbind_repeat="posts" dbind_filter="category:news">
  <h3 dbind_data="title"></h3>
</div>

Format: field:value

Sorting

dbind_sort

Sort items by a field.

<!-- Sort by price ascending -->
<div dbind_repeat="products" dbind_sort="price:asc">
  <span dbind_data="name"></span>
  <span dbind_data="price"></span>
</div>

<!-- Sort by date descending -->
<div dbind_repeat="posts" dbind_sort="createdAt:desc">
  <span dbind_data="title"></span>
</div>

<!-- Sort alphabetically -->
<div dbind_repeat="users" dbind_sort="name:asc">
  <span dbind_data="name"></span>
</div>

Format: field:asc or field:desc

Limiting

dbind_limit

Limit the number of displayed items.

<!-- Show only first 5 items -->
<div dbind_repeat="products" dbind_limit="5">
  <span dbind_data="name"></span>
</div>

Combining Attributes

You can combine filter, sort, and limit:

<div
  dbind_repeat="products"
  dbind_filter="category:electronics"
  dbind_sort="price:asc"
  dbind_limit="10"
>
  <div class="product-card">
    <img dbind_src="image" dbind_alt="name">
    <h3 dbind_data="name"></h3>
    <span dbind_data="price"></span>
  </div>
</div>

Nested Arrays

Access nested arrays using dot notation:

<div dbind_repeat="order.items">
  <span dbind_data="productName"></span>
  <span dbind_data="quantity"></span>
</div>

Collection Rendering

Fetch and render entire collections using JavaScript:

// Render collection with options
await DBindly.renderCollection('products', {
  limit: 20,
  sort: 'price',
  order: 'asc'
});

With HTML:

<div id="products-list" data-collection="products">
  <div class="product-card">
    <img dbind_src="image">
    <h3 dbind_data="name"></h3>
    <p dbind_data="price"></p>
  </div>
</div>

Example: Product Grid

<div class="product-grid" dbind_repeat="products" dbind_sort="price:asc" dbind_limit="12">
  <div class="product-card">
    <img dbind_src="image" dbind_alt="name" class="product-image">
    <div class="product-info">
      <h3 dbind_data="name"></h3>
      <p dbind_data="description"></p>
      <div class="product-meta">
        <span dbind_data="price"></span>
        <span dbind_show="onSale" class="sale-badge">Sale</span>
      </div>
    </div>
    <a dbind_href="url" class="btn">View Product</a>
  </div>
</div>

Example: Blog Posts

<div class="posts-list" dbind_repeat="posts" dbind_filter="published:true" dbind_sort="date:desc">
  <article class="post">
    <img dbind_src="featuredImage" dbind_alt="title">
    <div class="post-content">
      <span dbind_data="category" class="category-badge"></span>
      <h2 dbind_data="title"></h2>
      <p dbind_data="excerpt"></p>
      <div class="post-meta">
        <span dbind_data="author"></span>
        <span dbind_data="date"></span>
      </div>
    </div>
  </article>
</div>

Next Steps

Conditionals - Conditional display logic
Interactive - Search and pagination