Data-sync demo

Array #1

Add item

Array #2 Connected "Array #1" by sync

 
<div class="row">
    <div class="col-sm-6">
        <h2>Array #1</h2>
        <div data-array="List">
            <div>
                <label>An item</label> <a class="btn btn-default btn-sm" data-action="remove"></a>
                <input type="text" name="Title" placeholder="Enter title" class="form-control" />
                <hr/>
            </div>
        </div>
        
        <a class="btn btn-default" data-action="add" data-target="List">Add item</a>
    </div>
    
    <div class="col-sm-6">
        <h2>Array #2 <small>Connected &quot;Array #1&quot; by sync</small></h2>
        <table class="table table-striped table-bordered">
            <thead>
                <tr data-sync="List"> <!-- Not stored as data, only displayed -->
                    <td data-bind="Title" data-placeholder="No title entered"></td>
                </tr>
            </thead>
            <tbody>
                <tr data-array="Values" data-sync="List"> <!-- Generated dynamic list and stored in field -->
                    <td data-name="Value" data-func="input" data-placeholder="Enter a value"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template