@data-cache-styles : The Style Caching Performance Attribute
The data-cache-styles attribute is a performance optimization feature that caches style calculations for template-generated content. When enabled, Scryber reuses style computations across repeated template instances, dramatically reducing processing time and memory usage for large datasets.
Summary
The data-cache-styles attribute enables style calculation caching for template iterations, providing:
- Significant performance improvements for large collections (100+ items)
- Reduced memory footprint during PDF generation
- Faster rendering times by reusing computed styles
- Consistent styling across all template instances
This attribute is essential for:
- Processing large datasets (hundreds to thousands of items)
- High-performance batch PDF generation
- Reports with extensive repeated content
- Memory-constrained environments
- Time-sensitive document generation
Performance Impact: In testing with 1000+ items, enabling style caching can reduce generation time by 40-60% and memory usage by 30-50%.
Usage
The data-cache-styles attribute is applied to <template> elements, typically in conjunction with data-bind:
<template data-bind=""
data-cache-styles="true"
data-style-identifier="unique-cache-id">
<!-- Content with consistent styling -->
<div class="item"></div>
</template>
Basic Syntax
<!-- Enable style caching -->
<template data-bind=""
data-cache-styles="true">
<!-- Template content -->
</template>
<!-- Enable with explicit identifier -->
<template data-bind=""
data-cache-styles="true"
data-style-identifier="my-cache-key">
<!-- Template content -->
</template>
<!-- Disable style caching (default) -->
<template data-bind=""
data-cache-styles="false">
<!-- Template content -->
</template>
Supported Elements
The data-cache-styles attribute is only supported on the following element:
<template>- The template element for repeating content
Note: This attribute only affects template iterations. It has no effect on non-template elements.
Binding Values
Attribute Values
| Value | Description |
|---|---|
true |
Enable style caching for this template |
false |
Disable style caching (default behavior) |
Type
Type: boolean
Default: false
Expression Support
The attribute accepts literal boolean values or binding expressions:
<!-- Literal value -->
<template data-bind="" data-cache-styles="true">
<!-- Bound value (enable for large datasets) -->
<template data-bind=""
data-cache-styles="">
<!-- Bound from model property -->
<template data-bind=""
data-cache-styles="">
Notes
How Style Caching Works
When data-cache-styles="true":
- First Iteration: Scryber computes all styles for template content (CSS parsing, inheritance, specificity resolution)
- Cache Storage: Computed styles are stored with the cache identifier
- Subsequent Iterations: Scryber retrieves cached styles instead of recomputing
- Memory Benefits: Only one set of style objects is maintained, referenced by all instances
Cache Identifier
The data-style-identifier attribute works with data-cache-styles:
<template data-bind=""
data-cache-styles="true"
data-style-identifier="item-cache">
- If not specified, Scryber generates an automatic identifier
- Explicit identifiers enable cache sharing across multiple templates
- Use unique identifiers for templates with different styling
When to Enable Style Caching
Enable style caching when:
- Collection has 100+ items
- Template content has consistent styling across iterations
- Generating multiple similar documents
- Performance or memory is a concern
- Template uses complex CSS or class hierarchies
Don’t enable style caching when:
- Collection has fewer than 50 items (minimal benefit)
- Styles vary significantly between items (e.g., dynamic colors based on data)
- Using inline styles with item-specific values
- Template content structure changes per item
Style Variation and Caching
Style caching works best with static styles:
<!-- GOOD: Static styles, perfect for caching -->
<template data-bind="" data-cache-styles="true">
<div class="item-card">
<h3></h3>
<p></p>
</div>
</template>
<!-- ACCEPTABLE: Dynamic content, static structure -->
<template data-bind="" data-cache-styles="true">
<div class="item" style="padding: 10pt;">
</div>
</template>
<!-- NOT IDEAL: Dynamic inline styles -->
<template data-bind="" data-cache-styles="false">
<div style="color: ; background: ;">
<h1 id="data-bind-start-data-bind-step-data-bind-max--template-iteration-control-attributes">@data-bind-start, @data-bind-step, @data-bind-max : Template Iteration Control Attributes</h1>
<p>These three attributes provide precise control over template iteration behavior, enabling pagination, selective item rendering, and performance optimization for large datasets. They work in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute on <code class="language-plaintext highlighter-rouge"><template></code> elements to control which items from a collection are processed and rendered.</p>
<hr />
<h2 id="summary">Summary</h2>
<p>The iteration control attributes extend the basic <code class="language-plaintext highlighter-rouge">data-bind</code> functionality by allowing you to:</p>
<ul>
<li><strong>Paginate</strong> large datasets by specifying start index and maximum count</li>
<li><strong>Filter</strong> items by stepping through collections at intervals</li>
<li><strong>Optimize performance</strong> by limiting the number of items processed</li>
<li><strong>Create alternating patterns</strong> using step values</li>
<li><strong>Implement batch processing</strong> for reports and exports</li>
</ul>
<p>These attributes are essential for:</p>
<ul>
<li>Paginated reports showing a subset of data</li>
<li>Performance optimization with large collections (1000+ items)</li>
<li>Creating alternating row patterns (odd/even)</li>
<li>Batch processing documents</li>
<li>Implementing “top N” item displays</li>
<li>Creating multi-page reports with consistent item counts per page</li>
</ul>
<hr />
<h2 id="usage">Usage</h2>
<p>The iteration control attributes are applied to <code class="language-plaintext highlighter-rouge"><template></code> elements alongside the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-step=</span><span class="s">"1"</span>
<span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
<span class="c"><!-- Content repeated for items 10-29 --></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="basic-syntax">Basic Syntax</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at index 0 (default), show 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Start at index 20, show 10 items (items 20-29) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"20"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Show every other item (step of 2) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Complex: Start at 5, every 3rd item, max 15 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span>
<span class="na">data-bind-max=</span><span class="s">"15"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>These attributes are <strong>only</strong> supported on the following element:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><template></code> - The template element for repeating content</li>
</ul>
<p><strong>Note</strong>: These attributes must be used in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute. They have no effect without a bound collection.</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<h3 id="data-bind-start">data-bind-start</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">0</code>
<strong>Description</strong>: Zero-based index of the first item to process from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at first item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span><span class="nt">></span>
<span class="c"><!-- Start at 11th item (index 10) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Start at 101st item (index 100) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>If <code class="language-plaintext highlighter-rouge">start</code> exceeds the collection size, no items are rendered</li>
<li>Negative values are treated as 0</li>
<li>Works with any enumerable data type</li>
</ul>
<h3 id="data-bind-step">data-bind-step</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">1</code>
<strong>Description</strong>: Increment value for iteration. Controls which items are selected from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process every item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"1"</span><span class="nt">></span>
<span class="c"><!-- Process every other item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Process every third item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="c"><!-- Process every tenth item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Step value of 1 processes all items sequentially</li>
<li>Step value of 2 processes items at indices 0, 2, 4, 6, etc.</li>
<li>Step value of 3 processes items at indices 0, 3, 6, 9, etc.</li>
<li>Values less than 1 are treated as 1</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, the first item is at <code class="language-plaintext highlighter-rouge">start</code>, then <code class="language-plaintext highlighter-rouge">start + step</code>, <code class="language-plaintext highlighter-rouge">start + (step * 2)</code>, etc.</li>
</ul>
<h3 id="data-bind-max">data-bind-max</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">int.MaxValue</code> (unlimited)
<strong>Description</strong>: Maximum number of items to process and render.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process all items (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 50 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 100 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Limits the total number of items processed, not the index</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items starting from <code class="language-plaintext highlighter-rouge">start</code></li>
<li>Combined with <code class="language-plaintext highlighter-rouge">step</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items at <code class="language-plaintext highlighter-rouge">step</code> intervals</li>
<li>If collection has fewer items than <code class="language-plaintext highlighter-rouge">max</code>, all available items are processed</li>
<li>Values less than 1 result in no items being processed</li>
</ul>
<h3 id="combining-attributes">Combining Attributes</h3>
<p>The three attributes work together to provide flexible iteration control:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Formula: Process items from collection[start] up to max items, incrementing by step --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"START_INDEX"</span>
<span class="na">data-bind-step=</span><span class="s">"STEP_VALUE"</span>
<span class="na">data-bind-max=</span><span class="s">"MAX_COUNT"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Processing Logic</strong>:</p>
<ol>
<li>Start at index <code class="language-plaintext highlighter-rouge">data-bind-start</code> (default: 0)</li>
<li>Process the item at current index</li>
<li>Increment index by <code class="language-plaintext highlighter-rouge">data-bind-step</code> (default: 1)</li>
<li>Repeat until <code class="language-plaintext highlighter-rouge">data-bind-max</code> items are processed or collection ends</li>
<li>Skip any indices that exceed collection bounds</li>
</ol>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="pagination-calculations">Pagination Calculations</h3>
<p>For pagination, calculate the start index based on page number and items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (page_number - 1) * items_per_page
max_count = items_per_page
</code></pre></div></div>
<p>Example for page 3 with 20 items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (3 - 1) * 20 = 40
max_count = 20
// Processes items 40-59
</code></pre></div></div>
<h3 id="performance-considerations">Performance Considerations</h3>
<ol>
<li><strong>Large Collections</strong>: Always use <code class="language-plaintext highlighter-rouge">data-bind-max</code> to limit rendering for collections over 100 items</li>
<li><strong>Style Caching</strong>: Combine with <code class="language-plaintext highlighter-rouge">data-cache-styles="true"</code> for better performance</li>
<li><strong>Memory Usage</strong>: Processing fewer items reduces memory footprint during PDF generation</li>
<li><strong>Rendering Time</strong>: Each item requires layout calculation; limiting items improves generation speed</li>
</ol>
<h3 id="index-behavior">Index Behavior</h3>
<ul>
<li>Indices are zero-based (first item is index 0)</li>
<li>Invalid indices (negative, too large) are handled gracefully</li>
<li>Out-of-bounds indices are skipped without error</li>
<li>The <code class="language-plaintext highlighter-rouge">index()</code> function within the template reflects the iteration count, not the collection index</li>
</ul>
<h3 id="common-patterns">Common Patterns</h3>
<p><strong>Odd Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Even Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"1"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Top N Items</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Page 2 of 20 Items Per Page</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"20"</span> <span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Every 5th Item</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"5"</span><span class="nt">></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="1-basic-pagination-first-page">1. Basic Pagination (First Page)</h3>
<p>Show the first 10 items from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { products: [...100 products...] } --></span>
<span class="nt"><h2></span>Products - Page 1<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="2-pagination-second-page">2. Pagination (Second Page)</h3>
<p>Show items 11-20 (indices 10-19):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Products - Page 2<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="3-top-5-items">3. Top 5 Items</h3>
<p>Display only the first 5 items:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 5 Bestsellers<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"column-count: 1;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; margin-bottom: 10pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>. <span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0;"</span><span class="nt">></p></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold; color: #336699;"</span><span class="nt">></span>
$
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="4-alternating-row-pattern-odd-rows">4. Alternating Row Pattern (Odd Rows)</h3>
<p>Show only odd-indexed items (1st, 3rd, 5th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Odd Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="5-alternating-row-pattern-even-rows">5. Alternating Row Pattern (Even Rows)</h3>
<p>Show only even-indexed items (2nd, 4th, 6th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Even Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #e0e0e0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="6-multi-column-layout-two-columns">6. Multi-Column Layout (Two Columns)</h3>
<p>Split items into two columns using odd/even pattern:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Left Column (Odd Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top; margin-right: 2%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column A<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Right Column (Even Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column B<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="7-every-third-item">7. Every Third Item</h3>
<p>Show every third item from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Every Third Product<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="8-batch-processing-report-batch-1">8. Batch Processing Report (Batch 1)</h3>
<p>Process items in batches of 50:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 1 - Items 1-50<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="9-batch-processing-report-batch-2">9. Batch Processing Report (Batch 2)</h3>
<p>Second batch (items 51-100):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 2 - Items 51-100<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"50"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="10-sampling-every-10th-item">10. Sampling Every 10th Item</h3>
<p>Create a sample report showing every 10th item:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Sample Data (Every 10th Record)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span>:
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="11-dynamic-pagination-with-binding">11. Dynamic Pagination with Binding</h3>
<p>Use bound values to control pagination:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { items: [...], pageSize: 20, currentPage: 3 } --></span>
<span class="c"><!-- Calculate: start = (currentPage - 1) * pageSize = 40 --></span>
<span class="nt"><h2></span>Page <span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="12-top-n-with-performance-optimization">12. Top N with Performance Optimization</h3>
<p>Show top 50 items with style caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 50 Revenue Generating Products<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"top-products"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ccc;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"color: #666;"</span><span class="nt">></span>Revenue: $<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="13-quarter-sampling-every-4th-item">13. Quarter Sampling (Every 4th Item)</h3>
<p>Show every 4th item for quarterly sampling:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Quarterly Sample Data<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Period<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"4"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="14-limited-preview-with-message">14. Limited Preview with Message</h3>
<p>Show first 10 items with an indicator for more:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Order Preview (First 10 Orders)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
Order # -
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 10pt; padding: 10pt; background-color: #f0f0f0; text-align: center;"</span>
<span class="na">hidden=</span><span class="s">""</span><span class="nt">></span>
... and more orders
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="15-complex-multi-page-report">15. Complex Multi-Page Report</h3>
<p>Generate a multi-page report with consistent item counts per page:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Page 1: Items 0-24 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 1<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 1 - Items 1-25
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Page 2: Items 25-49 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 2<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"25"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 2 - Items 26-50
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="16-three-column-layout">16. Three-Column Layout</h3>
<p>Distribute items across three columns using step patterns:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Column 1: Items 0, 3, 6, 9... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 1<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 2: Items 1, 4, 7, 10... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 2<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 3: Items 2, 5, 8, 11... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 3<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"2"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="17-skip-first-n-items">17. Skip First N Items</h3>
<p>Skip the first 5 items and show the rest:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Items (Excluding First 5)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #eee;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="18-percentage-sampling-10-sample">18. Percentage Sampling (10% Sample)</h3>
<p>Show approximately 10% of items (every 10th):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>10% Data Sample<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"color: #666; font-style: italic;"</span><span class="nt">></span>
Showing approximately 10% of total records (every 10th item)
<span class="nt"></p></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; background-color: #f9f9f9; margin-bottom: 5pt;"</span><span class="nt">></span>
Record ID: -
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="19-combined-with-nested-templates">19. Combined with Nested Templates</h3>
<p>Paginate outer collection and limit inner collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Show first 5 categories, with top 3 products each --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; margin-left: 15pt; border-left: 3pt solid #336699;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="20-performance-optimized-large-dataset">20. Performance-Optimized Large Dataset</h3>
<p>Handle a very large dataset with pagination and caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process 1000 items in chunks of 100 --></span>
<span class="nt"><style></span>
<span class="nc">.data-row</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#eee</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><h1></span>Large Dataset Report (Items 1-100)<span class="nt"></h1></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"100"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"large-dataset-chunk1"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-row"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span></span> |
|
|
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmlattributes/data-bind.html">data-bind attribute</a> - Primary template iteration attribute</li>
<li><a href="/reference/htmltags/template.html">template element</a> - The template HTML element</li>
<li><a href="/reference/htmlattributes/data-cache-styles.html">data-cache-styles attribute</a> - Performance optimization</li>
<li><a href="/reference/components/foreach.html">ForEach Component</a> - Base component class</li>
<li><a href="/reference/binding/">Data Binding</a> - Complete data binding guide</li>
<li><a href="/reference/expressions/">Expressions</a> - Expression syntax reference</li>
</ul>
<hr />
</div>
</template>
Performance Guidelines
Small Collections (< 50 items):
- Caching overhead may exceed benefits
- Generally not recommended
Medium Collections (50-500 items):
- Moderate performance improvement (20-30%)
- Recommended if generation time is critical
Large Collections (500-1000 items):
- Significant performance improvement (40-50%)
- Highly recommended
Very Large Collections (1000+ items):
- Dramatic performance improvement (50-60%+)
- Essential for acceptable performance
- Should be combined with pagination (
data-bind-max)
Memory Considerations
Style caching reduces memory usage by:
- Storing one copy of style objects instead of N copies
- Reducing garbage collection pressure
- Enabling larger batch processing
Combining with Other Optimizations
For maximum performance with large datasets:
<style>
/* Use CSS classes instead of inline styles */
.data-row { padding: 5pt; border-bottom: 1pt solid #ddd; }
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="large-data"
data-bind-max="100">
<div class="data-row">
-
</div>
</template>
Optimizations combined:
- CSS classes (reusable styles)
- Style caching (avoid recomputation)
- Pagination (limit items per generation)
Examples
1. Basic Style Caching
Enable caching for a simple list:
<template data-bind=""
data-cache-styles="true">
<div style="padding: 10pt; border-bottom: 1pt solid #ddd;">
</div>
</template>
2. Large Table with Caching
Optimize a large data table:
<table style="width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="table-rows">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</tbody>
</table>
3. Product Catalog with CSS Classes
Use CSS classes with caching for consistency:
<style>
.product-card {
padding: 15pt;
margin-bottom: 10pt;
border: 1pt solid #ddd;
border-radius: 5pt;
}
.product-name {
font-weight: bold;
font-size: 12pt;
color: #336699;
}
.product-price {
color: #009900;
font-size: 14pt;
}
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="product-list">
<div class="product-card">
<div class="product-name"></div>
<p></p>
<div class="product-price">$</div>
</div>
</template>
4. Conditional Caching Based on Dataset Size
Enable caching only for large datasets:
<!-- Model: { items: [...], enableCache: items.length > 100 } -->
<template data-bind=""
data-cache-styles="">
<div style="padding: 8pt;">
</div>
</template>
5. Multi-Template with Shared Cache
Share cache identifier across related templates:
<style>
.list-item {
padding: 10pt;
border-bottom: 1pt solid #eee;
}
</style>
<!-- First template -->
<h2>Active Items</h2>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="item-style">
<div class="list-item"> - Active</div>
</template>
<!-- Second template with same cache -->
<h2>Inactive Items</h2>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="item-style">
<div class="list-item"> - Inactive</div>
</template>
6. Invoice Line Items
Optimize repeating invoice lines:
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="text-align: left;">Description</th>
<th style="text-align: right;">Qty</th>
<th style="text-align: right;">Unit Price</th>
<th style="text-align: right;">Total</th>
</tr>
</thead>
<tbody>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="invoice-lines">
<tr>
<td style="padding: 5pt;"></td>
<td style="text-align: right; padding: 5pt;"></td>
<td style="text-align: right; padding: 5pt;">$</td>
<td style="text-align: right; padding: 5pt; font-weight: bold;">$</td>
</tr>
</template>
</tbody>
</table>
7. Paginated Large Dataset
Combine caching with pagination:
<h1>Records 1-100 of </h1>
<template data-bind=""
data-bind-start="0"
data-bind-max="100"
data-cache-styles="true"
data-style-identifier="record-page-1">
<div style="padding: 5pt; border-bottom: 1pt solid #ddd; font-size: 9pt;">
<strong></strong> | |
</div>
</template>
8. Nested Templates with Selective Caching
Cache outer template only:
<!-- Cache outer template (many categories) -->
<template data-bind=""
data-cache-styles="true"
data-style-identifier="category-headers">
<div style="margin-bottom: 20pt;">
<h2 style="color: #336699; border-bottom: 2pt solid #336699;">
</h2>
<!-- Don't cache inner template (few items per category) -->
<template data-bind=""
data-cache-styles="false">
<div style="padding: 8pt; margin-left: 15pt;">
- $
</div>
</template>
</div>
</template>
9. Employee Directory
Large employee list with caching:
<style>
.employee-card {
padding: 12pt;
margin-bottom: 8pt;
border: 1pt solid #ddd;
background-color: #f9f9f9;
}
.employee-name {
font-weight: bold;
font-size: 11pt;
}
.employee-details {
font-size: 9pt;
color: #666;
margin-top: 3pt;
}
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="employee-directory">
<div class="employee-card">
<div class="employee-name"> </div>
<div class="employee-details">
| <br/>
Email: | Phone:
</div>
</div>
</template>
10. Transaction Log
High-volume transaction listing:
<h1>Transaction Log ( transactions)</h1>
<table style="width: 100%; font-size: 9pt;">
<thead>
<tr style="background-color: #336699; color: white;">
<th style="padding: 5pt;">Date</th>
<th style="padding: 5pt;">ID</th>
<th style="padding: 5pt;">Type</th>
<th style="padding: 5pt; text-align: right;">Amount</th>
</tr>
</thead>
<tbody>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="transaction-rows">
<tr>
<td style="padding: 3pt;"></td>
<td style="padding: 3pt;"></td>
<td style="padding: 3pt;"></td>
<td style="padding: 3pt; text-align: right;">$</td>
</tr>
</template>
</tbody>
</table>
11. Event Schedule
Large event listing with time-based grouping:
<style>
.event-item {
padding: 10pt;
margin-bottom: 8pt;
border-left: 4pt solid #336699;
background-color: #f5f5f5;
}
.event-time {
font-weight: bold;
color: #336699;
}
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="event-schedule">
<div class="event-item">
<div class="event-time"></div>
<div></div>
<div style="font-size: 9pt; color: #666;"></div>
</div>
</template>
12. Inventory Report with Alternating Rows
Use CSS pseudo-classes with caching:
<style>
.inventory-row {
padding: 8pt;
border-bottom: 1pt solid #ddd;
}
.inventory-row:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<table style="width: 100%;">
<template data-bind=""
data-cache-styles="true"
data-style-identifier="inventory-report">
<tr class="inventory-row">
<td></td>
<td></td>
<td style="text-align: right;"></td>
<td style="text-align: right;">$</td>
</tr>
</template>
</table>
13. Multi-Page Report with Consistent Styling
Cache styles across multiple report pages:
<style>
.report-section {
padding: 15pt;
margin-bottom: 10pt;
border: 1pt solid #ccc;
}
</style>
<!-- Page 1 -->
<div style="page-break-after: always;">
<h1>Section A</h1>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="report-sections">
<div class="report-section">
<h3></h3>
<p><h1 id="data-bind-start-data-bind-step-data-bind-max--template-iteration-control-attributes">@data-bind-start, @data-bind-step, @data-bind-max : Template Iteration Control Attributes</h1>
<p>These three attributes provide precise control over template iteration behavior, enabling pagination, selective item rendering, and performance optimization for large datasets. They work in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute on <code class="language-plaintext highlighter-rouge"><template></code> elements to control which items from a collection are processed and rendered.</p>
<hr />
<h2 id="summary">Summary</h2>
<p>The iteration control attributes extend the basic <code class="language-plaintext highlighter-rouge">data-bind</code> functionality by allowing you to:</p>
<ul>
<li><strong>Paginate</strong> large datasets by specifying start index and maximum count</li>
<li><strong>Filter</strong> items by stepping through collections at intervals</li>
<li><strong>Optimize performance</strong> by limiting the number of items processed</li>
<li><strong>Create alternating patterns</strong> using step values</li>
<li><strong>Implement batch processing</strong> for reports and exports</li>
</ul>
<p>These attributes are essential for:</p>
<ul>
<li>Paginated reports showing a subset of data</li>
<li>Performance optimization with large collections (1000+ items)</li>
<li>Creating alternating row patterns (odd/even)</li>
<li>Batch processing documents</li>
<li>Implementing “top N” item displays</li>
<li>Creating multi-page reports with consistent item counts per page</li>
</ul>
<hr />
<h2 id="usage">Usage</h2>
<p>The iteration control attributes are applied to <code class="language-plaintext highlighter-rouge"><template></code> elements alongside the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-step=</span><span class="s">"1"</span>
<span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
<span class="c"><!-- Content repeated for items 10-29 --></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="basic-syntax">Basic Syntax</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at index 0 (default), show 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Start at index 20, show 10 items (items 20-29) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"20"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Show every other item (step of 2) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Complex: Start at 5, every 3rd item, max 15 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span>
<span class="na">data-bind-max=</span><span class="s">"15"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>These attributes are <strong>only</strong> supported on the following element:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><template></code> - The template element for repeating content</li>
</ul>
<p><strong>Note</strong>: These attributes must be used in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute. They have no effect without a bound collection.</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<h3 id="data-bind-start">data-bind-start</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">0</code>
<strong>Description</strong>: Zero-based index of the first item to process from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at first item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span><span class="nt">></span>
<span class="c"><!-- Start at 11th item (index 10) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Start at 101st item (index 100) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>If <code class="language-plaintext highlighter-rouge">start</code> exceeds the collection size, no items are rendered</li>
<li>Negative values are treated as 0</li>
<li>Works with any enumerable data type</li>
</ul>
<h3 id="data-bind-step">data-bind-step</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">1</code>
<strong>Description</strong>: Increment value for iteration. Controls which items are selected from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process every item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"1"</span><span class="nt">></span>
<span class="c"><!-- Process every other item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Process every third item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="c"><!-- Process every tenth item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Step value of 1 processes all items sequentially</li>
<li>Step value of 2 processes items at indices 0, 2, 4, 6, etc.</li>
<li>Step value of 3 processes items at indices 0, 3, 6, 9, etc.</li>
<li>Values less than 1 are treated as 1</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, the first item is at <code class="language-plaintext highlighter-rouge">start</code>, then <code class="language-plaintext highlighter-rouge">start + step</code>, <code class="language-plaintext highlighter-rouge">start + (step * 2)</code>, etc.</li>
</ul>
<h3 id="data-bind-max">data-bind-max</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">int.MaxValue</code> (unlimited)
<strong>Description</strong>: Maximum number of items to process and render.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process all items (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 50 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 100 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Limits the total number of items processed, not the index</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items starting from <code class="language-plaintext highlighter-rouge">start</code></li>
<li>Combined with <code class="language-plaintext highlighter-rouge">step</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items at <code class="language-plaintext highlighter-rouge">step</code> intervals</li>
<li>If collection has fewer items than <code class="language-plaintext highlighter-rouge">max</code>, all available items are processed</li>
<li>Values less than 1 result in no items being processed</li>
</ul>
<h3 id="combining-attributes">Combining Attributes</h3>
<p>The three attributes work together to provide flexible iteration control:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Formula: Process items from collection[start] up to max items, incrementing by step --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"START_INDEX"</span>
<span class="na">data-bind-step=</span><span class="s">"STEP_VALUE"</span>
<span class="na">data-bind-max=</span><span class="s">"MAX_COUNT"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Processing Logic</strong>:</p>
<ol>
<li>Start at index <code class="language-plaintext highlighter-rouge">data-bind-start</code> (default: 0)</li>
<li>Process the item at current index</li>
<li>Increment index by <code class="language-plaintext highlighter-rouge">data-bind-step</code> (default: 1)</li>
<li>Repeat until <code class="language-plaintext highlighter-rouge">data-bind-max</code> items are processed or collection ends</li>
<li>Skip any indices that exceed collection bounds</li>
</ol>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="pagination-calculations">Pagination Calculations</h3>
<p>For pagination, calculate the start index based on page number and items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (page_number - 1) * items_per_page
max_count = items_per_page
</code></pre></div></div>
<p>Example for page 3 with 20 items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (3 - 1) * 20 = 40
max_count = 20
// Processes items 40-59
</code></pre></div></div>
<h3 id="performance-considerations">Performance Considerations</h3>
<ol>
<li><strong>Large Collections</strong>: Always use <code class="language-plaintext highlighter-rouge">data-bind-max</code> to limit rendering for collections over 100 items</li>
<li><strong>Style Caching</strong>: Combine with <code class="language-plaintext highlighter-rouge">data-cache-styles="true"</code> for better performance</li>
<li><strong>Memory Usage</strong>: Processing fewer items reduces memory footprint during PDF generation</li>
<li><strong>Rendering Time</strong>: Each item requires layout calculation; limiting items improves generation speed</li>
</ol>
<h3 id="index-behavior">Index Behavior</h3>
<ul>
<li>Indices are zero-based (first item is index 0)</li>
<li>Invalid indices (negative, too large) are handled gracefully</li>
<li>Out-of-bounds indices are skipped without error</li>
<li>The <code class="language-plaintext highlighter-rouge">index()</code> function within the template reflects the iteration count, not the collection index</li>
</ul>
<h3 id="common-patterns">Common Patterns</h3>
<p><strong>Odd Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Even Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"1"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Top N Items</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Page 2 of 20 Items Per Page</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"20"</span> <span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Every 5th Item</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"5"</span><span class="nt">></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="1-basic-pagination-first-page">1. Basic Pagination (First Page)</h3>
<p>Show the first 10 items from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { products: [...100 products...] } --></span>
<span class="nt"><h2></span>Products - Page 1<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="2-pagination-second-page">2. Pagination (Second Page)</h3>
<p>Show items 11-20 (indices 10-19):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Products - Page 2<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="3-top-5-items">3. Top 5 Items</h3>
<p>Display only the first 5 items:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 5 Bestsellers<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"column-count: 1;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; margin-bottom: 10pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>. <span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0;"</span><span class="nt">></p></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold; color: #336699;"</span><span class="nt">></span>
$
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="4-alternating-row-pattern-odd-rows">4. Alternating Row Pattern (Odd Rows)</h3>
<p>Show only odd-indexed items (1st, 3rd, 5th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Odd Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="5-alternating-row-pattern-even-rows">5. Alternating Row Pattern (Even Rows)</h3>
<p>Show only even-indexed items (2nd, 4th, 6th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Even Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #e0e0e0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="6-multi-column-layout-two-columns">6. Multi-Column Layout (Two Columns)</h3>
<p>Split items into two columns using odd/even pattern:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Left Column (Odd Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top; margin-right: 2%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column A<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Right Column (Even Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column B<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="7-every-third-item">7. Every Third Item</h3>
<p>Show every third item from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Every Third Product<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="8-batch-processing-report-batch-1">8. Batch Processing Report (Batch 1)</h3>
<p>Process items in batches of 50:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 1 - Items 1-50<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="9-batch-processing-report-batch-2">9. Batch Processing Report (Batch 2)</h3>
<p>Second batch (items 51-100):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 2 - Items 51-100<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"50"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="10-sampling-every-10th-item">10. Sampling Every 10th Item</h3>
<p>Create a sample report showing every 10th item:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Sample Data (Every 10th Record)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span>:
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="11-dynamic-pagination-with-binding">11. Dynamic Pagination with Binding</h3>
<p>Use bound values to control pagination:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { items: [...], pageSize: 20, currentPage: 3 } --></span>
<span class="c"><!-- Calculate: start = (currentPage - 1) * pageSize = 40 --></span>
<span class="nt"><h2></span>Page <span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="12-top-n-with-performance-optimization">12. Top N with Performance Optimization</h3>
<p>Show top 50 items with style caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 50 Revenue Generating Products<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"top-products"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ccc;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"color: #666;"</span><span class="nt">></span>Revenue: $<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="13-quarter-sampling-every-4th-item">13. Quarter Sampling (Every 4th Item)</h3>
<p>Show every 4th item for quarterly sampling:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Quarterly Sample Data<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Period<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"4"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="14-limited-preview-with-message">14. Limited Preview with Message</h3>
<p>Show first 10 items with an indicator for more:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Order Preview (First 10 Orders)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
Order # -
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 10pt; padding: 10pt; background-color: #f0f0f0; text-align: center;"</span>
<span class="na">hidden=</span><span class="s">""</span><span class="nt">></span>
... and more orders
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="15-complex-multi-page-report">15. Complex Multi-Page Report</h3>
<p>Generate a multi-page report with consistent item counts per page:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Page 1: Items 0-24 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 1<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 1 - Items 1-25
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Page 2: Items 25-49 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 2<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"25"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 2 - Items 26-50
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="16-three-column-layout">16. Three-Column Layout</h3>
<p>Distribute items across three columns using step patterns:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Column 1: Items 0, 3, 6, 9... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 1<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 2: Items 1, 4, 7, 10... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 2<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 3: Items 2, 5, 8, 11... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 3<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"2"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="17-skip-first-n-items">17. Skip First N Items</h3>
<p>Skip the first 5 items and show the rest:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Items (Excluding First 5)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #eee;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="18-percentage-sampling-10-sample">18. Percentage Sampling (10% Sample)</h3>
<p>Show approximately 10% of items (every 10th):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>10% Data Sample<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"color: #666; font-style: italic;"</span><span class="nt">></span>
Showing approximately 10% of total records (every 10th item)
<span class="nt"></p></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; background-color: #f9f9f9; margin-bottom: 5pt;"</span><span class="nt">></span>
Record ID: -
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="19-combined-with-nested-templates">19. Combined with Nested Templates</h3>
<p>Paginate outer collection and limit inner collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Show first 5 categories, with top 3 products each --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; margin-left: 15pt; border-left: 3pt solid #336699;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="20-performance-optimized-large-dataset">20. Performance-Optimized Large Dataset</h3>
<p>Handle a very large dataset with pagination and caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process 1000 items in chunks of 100 --></span>
<span class="nt"><style></span>
<span class="nc">.data-row</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#eee</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><h1></span>Large Dataset Report (Items 1-100)<span class="nt"></h1></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"100"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"large-dataset-chunk1"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-row"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span></span> |
|
|
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmlattributes/data-bind.html">data-bind attribute</a> - Primary template iteration attribute</li>
<li><a href="/reference/htmltags/template.html">template element</a> - The template HTML element</li>
<li><a href="/reference/htmlattributes/data-cache-styles.html">data-cache-styles attribute</a> - Performance optimization</li>
<li><a href="/reference/components/foreach.html">ForEach Component</a> - Base component class</li>
<li><a href="/reference/binding/">Data Binding</a> - Complete data binding guide</li>
<li><a href="/reference/expressions/">Expressions</a> - Expression syntax reference</li>
</ul>
<hr />
</p>
</div>
</template>
</div>
<!-- Page 2 -->
<div style="page-break-after: always;">
<h1>Section B</h1>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="report-sections">
<div class="report-section">
<h3></h3>
<p><h1 id="data-bind-start-data-bind-step-data-bind-max--template-iteration-control-attributes">@data-bind-start, @data-bind-step, @data-bind-max : Template Iteration Control Attributes</h1>
<p>These three attributes provide precise control over template iteration behavior, enabling pagination, selective item rendering, and performance optimization for large datasets. They work in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute on <code class="language-plaintext highlighter-rouge"><template></code> elements to control which items from a collection are processed and rendered.</p>
<hr />
<h2 id="summary">Summary</h2>
<p>The iteration control attributes extend the basic <code class="language-plaintext highlighter-rouge">data-bind</code> functionality by allowing you to:</p>
<ul>
<li><strong>Paginate</strong> large datasets by specifying start index and maximum count</li>
<li><strong>Filter</strong> items by stepping through collections at intervals</li>
<li><strong>Optimize performance</strong> by limiting the number of items processed</li>
<li><strong>Create alternating patterns</strong> using step values</li>
<li><strong>Implement batch processing</strong> for reports and exports</li>
</ul>
<p>These attributes are essential for:</p>
<ul>
<li>Paginated reports showing a subset of data</li>
<li>Performance optimization with large collections (1000+ items)</li>
<li>Creating alternating row patterns (odd/even)</li>
<li>Batch processing documents</li>
<li>Implementing “top N” item displays</li>
<li>Creating multi-page reports with consistent item counts per page</li>
</ul>
<hr />
<h2 id="usage">Usage</h2>
<p>The iteration control attributes are applied to <code class="language-plaintext highlighter-rouge"><template></code> elements alongside the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-step=</span><span class="s">"1"</span>
<span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
<span class="c"><!-- Content repeated for items 10-29 --></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="basic-syntax">Basic Syntax</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at index 0 (default), show 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Start at index 20, show 10 items (items 20-29) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"20"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Show every other item (step of 2) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
<span class="c"><!-- Complex: Start at 5, every 3rd item, max 15 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span>
<span class="na">data-bind-max=</span><span class="s">"15"</span><span class="nt">></span>
<span class="c"><!-- Template content --></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>These attributes are <strong>only</strong> supported on the following element:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><template></code> - The template element for repeating content</li>
</ul>
<p><strong>Note</strong>: These attributes must be used in conjunction with the <code class="language-plaintext highlighter-rouge">data-bind</code> attribute. They have no effect without a bound collection.</p>
<hr />
<h2 id="binding-values">Binding Values</h2>
<h3 id="data-bind-start">data-bind-start</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">0</code>
<strong>Description</strong>: Zero-based index of the first item to process from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Start at first item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span><span class="nt">></span>
<span class="c"><!-- Start at 11th item (index 10) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Start at 101st item (index 100) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>If <code class="language-plaintext highlighter-rouge">start</code> exceeds the collection size, no items are rendered</li>
<li>Negative values are treated as 0</li>
<li>Works with any enumerable data type</li>
</ul>
<h3 id="data-bind-step">data-bind-step</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">1</code>
<strong>Description</strong>: Increment value for iteration. Controls which items are selected from the collection.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process every item (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"1"</span><span class="nt">></span>
<span class="c"><!-- Process every other item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="c"><!-- Process every third item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="c"><!-- Process every tenth item --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Step value of 1 processes all items sequentially</li>
<li>Step value of 2 processes items at indices 0, 2, 4, 6, etc.</li>
<li>Step value of 3 processes items at indices 0, 3, 6, 9, etc.</li>
<li>Values less than 1 are treated as 1</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, the first item is at <code class="language-plaintext highlighter-rouge">start</code>, then <code class="language-plaintext highlighter-rouge">start + step</code>, <code class="language-plaintext highlighter-rouge">start + (step * 2)</code>, etc.</li>
</ul>
<h3 id="data-bind-max">data-bind-max</h3>
<p><strong>Type</strong>: <code class="language-plaintext highlighter-rouge">integer</code>
<strong>Default</strong>: <code class="language-plaintext highlighter-rouge">int.MaxValue</code> (unlimited)
<strong>Description</strong>: Maximum number of items to process and render.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process all items (default) --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 10 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 50 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="c"><!-- Process maximum of 100 items --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"100"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Notes</strong>:</p>
<ul>
<li>Limits the total number of items processed, not the index</li>
<li>Combined with <code class="language-plaintext highlighter-rouge">start</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items starting from <code class="language-plaintext highlighter-rouge">start</code></li>
<li>Combined with <code class="language-plaintext highlighter-rouge">step</code>, processes up to <code class="language-plaintext highlighter-rouge">max</code> items at <code class="language-plaintext highlighter-rouge">step</code> intervals</li>
<li>If collection has fewer items than <code class="language-plaintext highlighter-rouge">max</code>, all available items are processed</li>
<li>Values less than 1 result in no items being processed</li>
</ul>
<h3 id="combining-attributes">Combining Attributes</h3>
<p>The three attributes work together to provide flexible iteration control:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Formula: Process items from collection[start] up to max items, incrementing by step --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"START_INDEX"</span>
<span class="na">data-bind-step=</span><span class="s">"STEP_VALUE"</span>
<span class="na">data-bind-max=</span><span class="s">"MAX_COUNT"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Processing Logic</strong>:</p>
<ol>
<li>Start at index <code class="language-plaintext highlighter-rouge">data-bind-start</code> (default: 0)</li>
<li>Process the item at current index</li>
<li>Increment index by <code class="language-plaintext highlighter-rouge">data-bind-step</code> (default: 1)</li>
<li>Repeat until <code class="language-plaintext highlighter-rouge">data-bind-max</code> items are processed or collection ends</li>
<li>Skip any indices that exceed collection bounds</li>
</ol>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="pagination-calculations">Pagination Calculations</h3>
<p>For pagination, calculate the start index based on page number and items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (page_number - 1) * items_per_page
max_count = items_per_page
</code></pre></div></div>
<p>Example for page 3 with 20 items per page:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start_index = (3 - 1) * 20 = 40
max_count = 20
// Processes items 40-59
</code></pre></div></div>
<h3 id="performance-considerations">Performance Considerations</h3>
<ol>
<li><strong>Large Collections</strong>: Always use <code class="language-plaintext highlighter-rouge">data-bind-max</code> to limit rendering for collections over 100 items</li>
<li><strong>Style Caching</strong>: Combine with <code class="language-plaintext highlighter-rouge">data-cache-styles="true"</code> for better performance</li>
<li><strong>Memory Usage</strong>: Processing fewer items reduces memory footprint during PDF generation</li>
<li><strong>Rendering Time</strong>: Each item requires layout calculation; limiting items improves generation speed</li>
</ol>
<h3 id="index-behavior">Index Behavior</h3>
<ul>
<li>Indices are zero-based (first item is index 0)</li>
<li>Invalid indices (negative, too large) are handled gracefully</li>
<li>Out-of-bounds indices are skipped without error</li>
<li>The <code class="language-plaintext highlighter-rouge">index()</code> function within the template reflects the iteration count, not the collection index</li>
</ul>
<h3 id="common-patterns">Common Patterns</h3>
<p><strong>Odd Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"0"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Even Items Only</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"1"</span> <span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Top N Items</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Page 2 of 20 Items Per Page</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-start=</span><span class="s">"20"</span> <span class="na">data-bind-max=</span><span class="s">"20"</span><span class="nt">></span>
</code></pre></div></div>
<p><strong>Every 5th Item</strong>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span> <span class="na">data-bind-step=</span><span class="s">"5"</span><span class="nt">></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="1-basic-pagination-first-page">1. Basic Pagination (First Page)</h3>
<p>Show the first 10 items from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { products: [...100 products...] } --></span>
<span class="nt"><h2></span>Products - Page 1<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="2-pagination-second-page">2. Pagination (Second Page)</h3>
<p>Show items 11-20 (indices 10-19):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Products - Page 2<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Price<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"10"</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="3-top-5-items">3. Top 5 Items</h3>
<p>Display only the first 5 items:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 5 Bestsellers<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"column-count: 1;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; margin-bottom: 10pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>. <span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0;"</span><span class="nt">></p></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold; color: #336699;"</span><span class="nt">></span>
$
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="4-alternating-row-pattern-odd-rows">4. Alternating Row Pattern (Odd Rows)</h3>
<p>Show only odd-indexed items (1st, 3rd, 5th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Odd Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="5-alternating-row-pattern-even-rows">5. Alternating Row Pattern (Even Rows)</h3>
<p>Show only even-indexed items (2nd, 4th, 6th, etc.):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Even Items<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #e0e0e0; padding: 10pt; margin-bottom: 5pt;"</span><span class="nt">></span>
Item
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="6-multi-column-layout-two-columns">6. Multi-Column Layout (Two Columns)</h3>
<p>Split items into two columns using odd/even pattern:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Left Column (Odd Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top; margin-right: 2%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column A<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Right Column (Even Items) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 48%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column B<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"2"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border: 1pt solid #ddd; margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="7-every-third-item">7. Every Third Item</h3>
<p>Show every third item from a collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Every Third Product<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 15pt;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="8-batch-processing-report-batch-1">8. Batch Processing Report (Batch 1)</h3>
<p>Process items in batches of 50:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 1 - Items 1-50<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="9-batch-processing-report-batch-2">9. Batch Processing Report (Batch 2)</h3>
<p>Second batch (items 51-100):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><h1></span>Batch 2 - Items 51-100<span class="nt"></h1></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"50"</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="10-sampling-every-10th-item">10. Sampling Every 10th Item</h3>
<p>Create a sample report showing every 10th item:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Sample Data (Every 10th Record)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span>:
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="11-dynamic-pagination-with-binding">11. Dynamic Pagination with Binding</h3>
<p>Use bound values to control pagination:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: { items: [...], pageSize: 20, currentPage: 3 } --></span>
<span class="c"><!-- Calculate: start = (currentPage - 1) * pageSize = 40 --></span>
<span class="nt"><h2></span>Page <span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><div></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="12-top-n-with-performance-optimization">12. Top N with Performance Optimization</h3>
<p>Show top 50 items with style caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Top 50 Revenue Generating Products<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"50"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"top-products"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #ccc;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"color: #666;"</span><span class="nt">></span>Revenue: $<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="13-quarter-sampling-every-4th-item">13. Quarter Sampling (Every 4th Item)</h3>
<p>Show every 4th item for quarterly sampling:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Quarterly Sample Data<span class="nt"></h2></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr></span>
<span class="nt"><th></span>Period<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"4"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="14-limited-preview-with-message">14. Limited Preview with Message</h3>
<p>Show first 10 items with an indicator for more:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Order Preview (First 10 Orders)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #ddd;"</span><span class="nt">></span>
Order # -
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 10pt; padding: 10pt; background-color: #f0f0f0; text-align: center;"</span>
<span class="na">hidden=</span><span class="s">""</span><span class="nt">></span>
... and more orders
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="15-complex-multi-page-report">15. Complex Multi-Page Report</h3>
<p>Generate a multi-page report with consistent item counts per page:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Page 1: Items 0-24 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 1<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 1 - Items 1-25
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Page 2: Items 25-49 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #336699; color: white; padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"margin: 0;"</span><span class="nt">></span>Inventory Report - Page 2<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; margin-top: 10pt;"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><th></span>SKU<span class="nt"></th></span>
<span class="nt"><th></span>Product<span class="nt"></th></span>
<span class="nt"><th></span>Qty<span class="nt"></th></span>
<span class="nt"><th></span>Value<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"25"</span>
<span class="na">data-bind-max=</span><span class="s">"25"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td></td></span>
<span class="nt"><td></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"text-align: right;"</span><span class="nt">></span>$<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></template></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: right; margin-top: 10pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Page 2 - Items 26-50
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="16-three-column-layout">16. Three-Column Layout</h3>
<p>Distribute items across three columns using step patterns:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="c"><!-- Column 1: Items 0, 3, 6, 9... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 1<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 2: Items 1, 4, 7, 10... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top; margin-right: 1%;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 2<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"1"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="c"><!-- Column 3: Items 2, 5, 8, 11... --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 32%; vertical-align: top;"</span><span class="nt">></span>
<span class="nt"><h3></span>Column 3<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"2"</span>
<span class="na">data-bind-step=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 5pt; margin-bottom: 5pt; border: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="17-skip-first-n-items">17. Skip First N Items</h3>
<p>Skip the first 5 items and show the rest:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>Items (Excluding First 5)<span class="nt"></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #eee;"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="18-percentage-sampling-10-sample">18. Percentage Sampling (10% Sample)</h3>
<p>Show approximately 10% of items (every 10th):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2></span>10% Data Sample<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"color: #666; font-style: italic;"</span><span class="nt">></span>
Showing approximately 10% of total records (every 10th item)
<span class="nt"></p></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-step=</span><span class="s">"10"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 10pt; background-color: #f9f9f9; margin-bottom: 5pt;"</span><span class="nt">></span>
Record ID: -
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="19-combined-with-nested-templates">19. Combined with Nested Templates</h3>
<p>Paginate outer collection and limit inner collection:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Show first 5 categories, with top 3 products each --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"color: #336699;"</span><span class="nt">></h2></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-max=</span><span class="s">"3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 8pt; margin-left: 15pt; border-left: 3pt solid #336699;"</span><span class="nt">></span>
<span class="nt"><strong></strong></span> - $
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<h3 id="20-performance-optimized-large-dataset">20. Performance-Optimized Large Dataset</h3>
<p>Handle a very large dataset with pagination and caching:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Process 1000 items in chunks of 100 --></span>
<span class="nt"><style></span>
<span class="nc">.data-row</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#eee</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><h1></span>Large Dataset Report (Items 1-100)<span class="nt"></h1></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span>
<span class="na">data-bind-start=</span><span class="s">"0"</span>
<span class="na">data-bind-max=</span><span class="s">"100"</span>
<span class="na">data-cache-styles=</span><span class="s">"true"</span>
<span class="na">data-style-identifier=</span><span class="s">"large-dataset-chunk1"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"data-row"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold;"</span><span class="nt">></span></span> |
|
|
<span class="nt"></div></span>
<span class="nt"></template></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmlattributes/data-bind.html">data-bind attribute</a> - Primary template iteration attribute</li>
<li><a href="/reference/htmltags/template.html">template element</a> - The template HTML element</li>
<li><a href="/reference/htmlattributes/data-cache-styles.html">data-cache-styles attribute</a> - Performance optimization</li>
<li><a href="/reference/components/foreach.html">ForEach Component</a> - Base component class</li>
<li><a href="/reference/binding/">Data Binding</a> - Complete data binding guide</li>
<li><a href="/reference/expressions/">Expressions</a> - Expression syntax reference</li>
</ul>
<hr />
</p>
</div>
</template>
</div>
14. Customer Mailing Labels
High-volume label generation:
<style>
.mailing-label {
width: 180pt;
height: 90pt;
padding: 10pt;
border: 1pt solid #000;
margin-bottom: 5pt;
display: inline-block;
}
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="mailing-labels">
<div class="mailing-label">
<div style="font-weight: bold;"></div>
<div></div>
<div></div>
<div>, </div>
</div>
</template>
15. Performance Comparison Report
Demonstrate caching benefits with metrics:
<!-- Without caching (baseline) -->
<div style="page-break-after: always;">
<h1>Test 1: Without Style Caching</h1>
<p>Generation started: </p>
<template data-bind=""
data-cache-styles="false">
<div style="padding: 5pt; border-bottom: 1pt solid #ddd;">
-
</div>
</template>
<p>Generation ended: </p>
<p>Items processed: </p>
</div>
<!-- With caching (optimized) -->
<div>
<h1>Test 2: With Style Caching</h1>
<p>Generation started: </p>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="performance-test">
<div style="padding: 5pt; border-bottom: 1pt solid #ddd;">
-
</div>
</template>
<p>Generation ended: </p>
<p>Items processed: </p>
</div>
16. Sales Report with Summary Cards
Cache consistent card layout:
<style>
.sales-card {
padding: 12pt;
margin-bottom: 10pt;
border: 2pt solid #336699;
background-color: #f0f8ff;
}
.sales-amount {
font-size: 16pt;
font-weight: bold;
color: #336699;
}
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="sales-cards">
<div class="sales-card">
<div style="font-weight: bold;"></div>
<div class="sales-amount">$</div>
<div style="font-size: 9pt; color: #666;">
transactions
</div>
</div>
</template>
17. Log File Viewer
Thousands of log entries with caching:
<style>
.log-entry {
font-family: 'Courier New', monospace;
font-size: 8pt;
padding: 2pt 5pt;
border-bottom: 1pt solid #eee;
}
</style>
<h1>Application Log</h1>
<p>Total entries: </p>
<template data-bind=""
data-bind-max="1000"
data-cache-styles="true"
data-style-identifier="log-entries">
<div class="log-entry">
[] -
</div>
</template>
18. Product Comparison Grid
Large comparison table with caching:
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #336699; color: white;">
<th style="padding: 8pt;">Feature</th>
<th style="padding: 8pt;">Value</th>
<th style="padding: 8pt;">Comparison</th>
</tr>
</thead>
<tbody>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="feature-rows">
<tr>
<td style="padding: 6pt; font-weight: bold;"></td>
<td style="padding: 6pt;"></td>
<td style="padding: 6pt; text-align: center;"></td>
</tr>
</template>
</tbody>
</table>
19. Batch Processing Status Report
Monitor large batch operations:
<h1>Batch Processing Report</h1>
<p>Processed: of </p>
<style>
.batch-item {
padding: 6pt;
border-bottom: 1pt solid #ddd;
font-size: 9pt;
}
.status-success { color: green; }
.status-error { color: red; }
.status-pending { color: orange; }
</style>
<template data-bind=""
data-cache-styles="true"
data-style-identifier="batch-items">
<div class="batch-item">
<strong></strong> -
<span class="status-"> []</span>
</div>
</template>
20. Complex Nested Structure with Selective Caching
Optimize only high-volume sections:
<style>
.section-header {
background-color: #336699;
color: white;
padding: 10pt;
margin-bottom: 10pt;
}
.subsection-item {
padding: 5pt;
margin-left: 15pt;
border-left: 3pt solid #ccc;
}
</style>
<!-- Don't cache outer (few departments) -->
<template data-bind=""
data-cache-styles="false">
<div style="margin-bottom: 30pt;">
<div class="section-header">
</div>
<!-- Cache inner (many employees per department) -->
<template data-bind=""
data-cache-styles="true"
data-style-identifier="employee-items">
<div class="subsection-item">
-
</div>
</template>
</div>
</template>
See Also
- data-bind attribute - Primary template iteration attribute
- data-style-identifier attribute - Cache identifier
- data-bind-max attribute - Pagination for performance
- template element - The template HTML element
- Performance Guide - Complete performance optimization guide
- ForEach Component - Base component class