dbindly

The dbind_format attribute applies formatting transformations to data values before displaying them. This is essential for presenting dates, currencies, numbers, and text in user-friendly formats.

dbind_format

Purpose: Apply one or more formatting filters to a data value.

Syntax:

<!-- Single filter -->
<element dbind_data="field" dbind_format="filterName"></element>
 
<!-- Filter with parameter -->
<element dbind_data="field" dbind_format="filterName:parameter"></element>
 
<!-- Multiple filters (chained) -->
<element dbind_data="field" dbind_format="filter1 | filter2"></element>

How It Works

DBindly gets the raw data value
Applies each filter in order
Displays the formatted result

Currency Formatting

currency

Format numbers as currency with proper symbols and separators.

Syntax:

<element dbind_data="price" dbind_format="currency:CODE"></element>

Supported Currency Codes:

USD - US Dollar ($)
EUR - Euro (€)
GBP - British Pound (£)
JPY - Japanese Yen (¥)
CAD - Canadian Dollar (CA$)
AUD - Australian Dollar (A$)
And many more (any ISO 4217 code)

Examples

<!-- US Dollars -->
<span dbind_data="price" dbind_format="currency:USD"></span>
<!-- 149.99 → $149.99 -->
 
<!-- Euros -->
<span dbind_data="price" dbind_format="currency:EUR"></span>
<!-- 149.99 → €149.99 -->
 
<!-- British Pounds -->
<span dbind_data="price" dbind_format="currency:GBP"></span>
<!-- 149.99 → £149.99 -->
 
<!-- Japanese Yen (no decimals) -->
<span dbind_data="price" dbind_format="currency:JPY"></span>
<!-- 14999 → ¥14,999 -->

Use Cases

Product Pricing

<div class="product-card">
  <h3 dbind_data="name"></h3>
  <div class="price-info">
    <span class="current-price" dbind_data="price" dbind_format="currency:USD"></span>
    <span class="original-price" dbind_show="onSale" dbind_data="originalPrice" dbind_format="currency:USD"></span>
  </div>
</div>

Shopping Cart

<table class="cart-table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody dbind_repeat="cartItems">
    <tr>
      <td dbind_data="name"></td>
      <td dbind_data="quantity"></td>
      <td dbind_data="price" dbind_format="currency:USD"></td>
      <td dbind_data="lineTotal" dbind_format="currency:USD"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Subtotal</td>
      <td dbind_data="subtotal" dbind_format="currency:USD"></td>
    </tr>
    <tr>
      <td colspan="3">Tax</td>
      <td dbind_data="tax" dbind_format="currency:USD"></td>
    </tr>
    <tr class="total-row">
      <td colspan="3">Total</td>
      <td dbind_data="total" dbind_format="currency:USD"></td>
    </tr>
  </tfoot>
</table>

Date & Time Formatting

date

Format date/timestamp values into readable strings.

Syntax:

<element dbind_data="dateField" dbind_format="date:style"></element>

Date Styles:

Style	Example Output
`short`	`1/5/24`
`medium`	`Jan 5, 2024`
`long`	`January 5, 2024`
`full`	`Friday, January 5, 2024`
`relative`	`2 hours ago`, `in 3 days`
`iso`	`2024-01-05T14:30:00Z`
`time`	`2:30 PM`
`datetime`	`Jan 5, 2024, 2:30 PM`

Examples

<!-- Short date -->
<span dbind_data="createdAt" dbind_format="date:short"></span>
<!-- 2024-01-05T14:30:00Z → 1/5/24 -->
 
<!-- Medium date -->
<span dbind_data="createdAt" dbind_format="date:medium"></span>
<!-- 2024-01-05T14:30:00Z → Jan 5, 2024 -->
 
<!-- Long date -->
<span dbind_data="createdAt" dbind_format="date:long"></span>
<!-- 2024-01-05T14:30:00Z → January 5, 2024 -->
 
<!-- Full date -->
<span dbind_data="createdAt" dbind_format="date:full"></span>
<!-- 2024-01-05T14:30:00Z → Friday, January 5, 2024 -->
 
<!-- Relative time -->
<span dbind_data="createdAt" dbind_format="date:relative"></span>
<!-- → 2 hours ago / yesterday / in 3 days -->
 
<!-- Time only -->
<span dbind_data="createdAt" dbind_format="date:time"></span>
<!-- 2024-01-05T14:30:00Z → 2:30 PM -->
 
<!-- Date and time -->
<span dbind_data="createdAt" dbind_format="date:datetime"></span>
<!-- 2024-01-05T14:30:00Z → Jan 5, 2024, 2:30 PM -->

Use Cases

Blog Post Meta

<article class="blog-post">
  <header>
    <h1 dbind_data="title"></h1>
    <div class="meta">
      <span class="author" dbind_data="author.name"></span>
      <time dbind_data="publishedAt" dbind_format="date:long"></time>
    </div>
  </header>
</article>

Activity Feed

<div class="activity-feed">
  <div dbind_repeat="activities" class="activity-item">
    <img dbind_src="user.avatar" dbind_alt="user.name">
    <div class="activity-content">
      <span dbind_data="user.name"></span>
      <span dbind_data="action"></span>
      <time dbind_data="timestamp" dbind_format="date:relative"></time>
    </div>
  </div>
</div>

Event Listing

<div dbind_repeat="events" class="event-card">
  <div class="event-date">
    <span class="date" dbind_data="startDate" dbind_format="date:medium"></span>
    <span class="time" dbind_data="startDate" dbind_format="date:time"></span>
  </div>
  <h3 dbind_data="title"></h3>
  <p dbind_data="description"></p>
</div>

Comment Timestamps

<div dbind_repeat="comments" class="comment">
  <header class="comment-header">
    <span dbind_data="author.name"></span>
    <time dbind_data="createdAt" dbind_format="date:relative" title="{{createdAt}}"></time>
  </header>
  <p dbind_data="text"></p>
</div>

Number Formatting

number

Format numbers with thousands separators and decimal precision.

Syntax:

<element dbind_data="value" dbind_format="number"></element>
<element dbind_data="value" dbind_format="number:decimals"></element>

Examples

<!-- Basic number formatting -->
<span dbind_data="views" dbind_format="number"></span>
<!-- 1234567 → 1,234,567 -->
 
<!-- With 2 decimal places -->
<span dbind_data="average" dbind_format="number:2"></span>
<!-- 3.14159 → 3.14 -->
 
<!-- With 0 decimal places -->
<span dbind_data="count" dbind_format="number:0"></span>
<!-- 1234.56 → 1,235 -->

percent

Format numbers as percentages.

Syntax:

<element dbind_data="value" dbind_format="percent"></element>
<element dbind_data="value" dbind_format="percent:decimals"></element>

Examples

<!-- Basic percentage (value is 0-1) -->
<span dbind_data="progress" dbind_format="percent"></span>
<!-- 0.75 → 75% -->
 
<!-- With decimal places -->
<span dbind_data="rate" dbind_format="percent:2"></span>
<!-- 0.8567 → 85.67% -->

Use Cases

Statistics Dashboard

<div class="stats-grid">
  <div class="stat-card">
    <span class="stat-label">Total Views</span>
    <span class="stat-value" dbind_data="totalViews" dbind_format="number"></span>
  </div>
  <div class="stat-card">
    <span class="stat-label">Conversion Rate</span>
    <span class="stat-value" dbind_data="conversionRate" dbind_format="percent:1"></span>
  </div>
  <div class="stat-card">
    <span class="stat-label">Average Order</span>
    <span class="stat-value" dbind_data="avgOrder" dbind_format="currency:USD"></span>
  </div>
  <div class="stat-card">
    <span class="stat-label">Rating</span>
    <span class="stat-value">
      <span dbind_data="avgRating" dbind_format="number:1"></span>/5
    </span>
  </div>
</div>

Progress Bar

<div class="progress-container">
  <div class="progress-bar">
    <div class="progress-fill" style="width: {{progress * 100}}%"></div>
  </div>
  <span class="progress-text" dbind_data="progress" dbind_format="percent:0"></span>
</div>

Text Transformations

uppercase

Convert text to uppercase.

<span dbind_data="status" dbind_format="uppercase"></span>
<!-- active → ACTIVE -->

lowercase

Convert text to lowercase.

<span dbind_data="email" dbind_format="lowercase"></span>
<!-- John@Example.COM → john@example.com -->

capitalize

Capitalize the first letter of each word.

<span dbind_data="name" dbind_format="capitalize"></span>
<!-- john doe → John Doe -->

titlecase

Same as capitalize - converts to title case.

<span dbind_data="title" dbind_format="titlecase"></span>
<!-- the quick brown fox → The Quick Brown Fox -->

truncate

Truncate text to a specified length with ellipsis.

Syntax:

<element dbind_data="text" dbind_format="truncate:length"></element>

<p dbind_data="description" dbind_format="truncate:100"></p>
<!-- Long description text... → Long description text that is really really long and keeps going... -->

Use Cases

Status Badges

<span class="status-badge" dbind_class="statusClass" dbind_data="status" dbind_format="uppercase"></span>
<!-- Displays: ACTIVE, PENDING, CANCELLED -->

Article Excerpts

<div dbind_repeat="articles" class="article-preview">
  <h3 dbind_data="title"></h3>
  <p dbind_data="content" dbind_format="truncate:150"></p>
  <a dbind_href="url">Read more</a>
</div>

User Names

<span class="user-name" dbind_data="name" dbind_format="capitalize"></span>

Ordinal Numbers

ordinal

Convert numbers to ordinal form (1st, 2nd, 3rd, etc.).

<span dbind_data="rank" dbind_format="ordinal"></span>
<!-- 1 → 1st, 2 → 2nd, 3 → 3rd, 4 → 4th -->

Use Cases

Leaderboard

<div dbind_repeat="players" class="leaderboard-row">
  <span class="rank" dbind_data="_number" dbind_format="ordinal"></span>
  <span class="player-name" dbind_data="name"></span>
  <span class="score" dbind_data="score" dbind_format="number"></span>
</div>

Contest Winners

<div class="winners">
  <div class="winner" dbind_repeat="winners">
    <span class="place" dbind_data="place" dbind_format="ordinal"></span>
    <span class="name" dbind_data="name"></span>
  </div>
</div>
<!-- 1st Place: John, 2nd Place: Jane, 3rd Place: Bob -->

File Sizes

filesize

Format bytes into human-readable file sizes.

<span dbind_data="fileSize" dbind_format="filesize"></span>
<!-- 1024 → 1 KB -->
<!-- 1048576 → 1 MB -->
<!-- 1073741824 → 1 GB -->

Use Cases

File List

<table class="file-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Size</th>
      <th>Modified</th>
    </tr>
  </thead>
  <tbody dbind_repeat="files">
    <tr>
      <td dbind_data="name"></td>
      <td dbind_data="size" dbind_format="filesize"></td>
      <td dbind_data="modifiedAt" dbind_format="date:relative"></td>
    </tr>
  </tbody>
</table>

Upload Progress

<div class="upload-info">
  <span>
    <span dbind_data="uploadedBytes" dbind_format="filesize"></span>
    of
    <span dbind_data="totalBytes" dbind_format="filesize"></span>
  </span>
</div>

Compact Numbers

compact

Format large numbers in compact form (1K, 1M, 1B).

<span dbind_data="followers" dbind_format="compact"></span>
<!-- 1234 → 1.2K -->
<!-- 1234567 → 1.2M -->
<!-- 1234567890 → 1.2B -->

Use Cases

Social Stats

<div class="social-stats">
  <span>
    <strong dbind_data="followers" dbind_format="compact"></strong> Followers
  </span>
  <span>
    <strong dbind_data="following" dbind_format="compact"></strong> Following
  </span>
  <span>
    <strong dbind_data="likes" dbind_format="compact"></strong> Likes
  </span>
</div>

Video Stats

<div class="video-meta">
  <span><span dbind_data="views" dbind_format="compact"></span> views</span>
  <span><span dbind_data="likes" dbind_format="compact"></span> likes</span>
</div>

Chaining Filters

Apply multiple filters by separating them with |:

<!-- Uppercase then truncate -->
<span dbind_data="category" dbind_format="uppercase | truncate:20"></span>
 
<!-- Format as currency, but this is typically not chained -->
<span dbind_data="price" dbind_format="currency:USD"></span>

Common Chains

<!-- Capitalize and truncate -->
<span dbind_data="name" dbind_format="capitalize | truncate:30"></span>
 
<!-- Number with percentage -->
<span dbind_data="change" dbind_format="number:2">%</span>

Inline Template Filters

You can also apply filters within template expressions:

<p>Posted {{createdAt|date:relative}} by {{author|uppercase}}</p>
 
<span>Price: {{price|currency:USD}}</span>
 
<div>{{description|truncate:100}}</div>

Complete Example: E-commerce Product Page

<div class="product-page">
  <!-- Product Header -->
  <header class="product-header">
    <h1 dbind_data="name"></h1>
    <div class="product-meta">
      <span class="sku">SKU: <span dbind_data="sku" dbind_format="uppercase"></span></span>
      <span class="rating">
        <span dbind_data="rating" dbind_format="number:1"></span>/5
        (<span dbind_data="reviewCount" dbind_format="number"></span> reviews)
      </span>
    </div>
  </header>
 
  <!-- Pricing Section -->
  <section class="pricing">
    <div class="price-display">
      <span class="current-price" dbind_data="price" dbind_format="currency:USD"></span>
      <span class="original-price" dbind_show="onSale" dbind_data="originalPrice" dbind_format="currency:USD"></span>
      <span class="discount" dbind_show="onSale">
        Save <span dbind_data="discountPercent" dbind_format="percent:0"></span>
      </span>
    </div>
 
    <div class="price-per-unit" dbind_show="pricePerUnit">
      <span dbind_data="pricePerUnit" dbind_format="currency:USD"></span> / <span dbind_data="unit"></span>
    </div>
  </section>
 
  <!-- Product Stats -->
  <section class="product-stats">
    <div class="stat">
      <span class="stat-value" dbind_data="soldCount" dbind_format="compact"></span>
      <span class="stat-label">sold</span>
    </div>
    <div class="stat">
      <span class="stat-value" dbind_data="viewCount" dbind_format="compact"></span>
      <span class="stat-label">views</span>
    </div>
    <div class="stat">
      <span class="stat-value" dbind_data="wishlistCount" dbind_format="compact"></span>
      <span class="stat-label">wishlisted</span>
    </div>
  </section>
 
  <!-- Description -->
  <section class="description">
    <p dbind_data="shortDescription" dbind_format="truncate:200"></p>
    <div dbind_html="fullDescription"></div>
  </section>
 
  <!-- Specifications -->
  <section class="specifications">
    <h3>Specifications</h3>
    <table>
      <tr dbind_repeat="specs">
        <th dbind_data="label" dbind_format="capitalize"></th>
        <td dbind_data="value"></td>
      </tr>
    </table>
  </section>
 
  <!-- Reviews -->
  <section class="reviews">
    <h3>Customer Reviews</h3>
 
    <div dbind_repeat="reviews" class="review">
      <header class="review-header">
        <span class="reviewer" dbind_data="author.name" dbind_format="capitalize"></span>
        <span class="rating" dbind_data="rating" dbind_format="number:0">★</span>
        <time dbind_data="createdAt" dbind_format="date:relative"></time>
      </header>
      <p class="review-text" dbind_data="text" dbind_format="truncate:300"></p>
    </div>
  </section>
 
  <!-- Related Products -->
  <section class="related">
    <h3>You May Also Like</h3>
    <div class="product-grid" dbind_repeat="relatedProducts">
      <article class="product-card">
        <img dbind_src="image" dbind_alt="name">
        <h4 dbind_data="name" dbind_format="truncate:40"></h4>
        <span class="price" dbind_data="price" dbind_format="currency:USD"></span>
      </article>
    </div>
  </section>
</div>

Data:

{
  "name": "Premium Wireless Headphones",
  "sku": "wh-pro-2024",
  "price": 199.99,
  "originalPrice": 249.99,
  "onSale": true,
  "discountPercent": 0.20,
  "rating": 4.7,
  "reviewCount": 1234,
  "soldCount": 45678,
  "viewCount": 234567,
  "wishlistCount": 8901,
  "shortDescription": "Experience crystal-clear audio with our premium wireless headphones featuring active noise cancellation and 30-hour battery life...",
  "specs": [
    { "label": "battery life", "value": "30 hours" },
    { "label": "connectivity", "value": "Bluetooth 5.2" },
    { "label": "weight", "value": "250g" }
  ],
  "reviews": [
    {
      "author": { "name": "john smith" },
      "rating": 5,
      "text": "These are the best headphones I've ever owned!",
      "createdAt": "2024-01-15T10:30:00Z"
    }
  ]
}

Filter Reference Table

Filter	Input	Parameters	Output Example
`currency`	Number	Currency code	`$1,234.56`
`date`	Date/ISO	Style	`Jan 5, 2024`
`number`	Number	Decimals	`1,234.56`
`percent`	Number	Decimals	`75%`
`uppercase`	String	-	`HELLO`
`lowercase`	String	-	`hello`
`capitalize`	String	-	`Hello World`
`titlecase`	String	-	`Hello World`
`truncate`	String	Length	`Hello...`
`ordinal`	Number	-	`1st`
`filesize`	Number	-	`1.5 MB`
`compact`	Number	-	`1.2K`

Next Steps

Core Binding - Bind data to elements
Lists - Format data in lists
Forms - Format form input values