dojox.mvc.Repeat

Authors: Rahul Akolkar
Ed Chatelain
Developers:Rahul Akolkar, Ed Chatelain
since:V1.7

A repeat is bound to an intermediate dojo.Stateful node corresponding to an array in the data model. Child dijits or custom view components inside it inherit their parent data binding context from it.

Parameters

Parameter Type Default Description
children StatefulArray   The array of data model that is used to render child nodes.
index Integer   An index used to track the current iteration when the repeating UI is produced. This may be used to parameterize the content in the repeat template for the current iteration.
exprchar Character '$' Character to use for a substitution expression, for a substitution string like ${this.index}

Examples

Declarative example

var searchRecords;
require([
        'dojo/parser',
        'dojo/ready',
        'dojox/mvc/getStateful',
        'dijit/form/TextBox',
        'dijit/form/Button',
        'dojox/mvc/Group',
        'dojox/mvc/Repeat',
        'dojox/mvc/Output'
        ], function(parser, ready, getStateful){

        // Initial data
        var search_results_init = {
        "identifier": "Serial",
        "items": [
    {
        "Serial"  : "A111",
        "First"   : "Anne",
        "Last"    : "Ackerman",
        "Email"   : "a.a@test.com"
    },
    {
        "Serial"  : "B111",
        "First"   : "Ben",
        "Last"    : "Beckham",
        "Email"   : "b.b@test.com"
    },
    {
        "Serial"  : "I111",
        "First"   : "Irene",
        "Last"    : "Ira",
        "Email"   : "i.i@test.com"
    },
    {
        "Serial"  : "J111",
        "First"   : "John",
        "Last"    : "Jacklin",
        "Email"   : "j.j@test.com"
    }
]
        };
                // The getStateful call will take json data and create make it Stateful
                searchRecords = getStateful(search_results_init);
        });
.row { width: 500px; display: inline-block; margin: 5px; }
.cell { width: 20%;  display:inline-block; }
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div id="main">
        <div data-dojo-type="dojox/mvc/Group" data-dojo-props="target: searchRecords">
<!--
    The repeat container denotes a templated UI that operates over a collection
    of data records.
    The UI can be customized for each iteration using properties such as
    ${this.index} for the iteration index.
-->
        <h4>Repeat with TextBox for First and Last properties: </h4>
        <div id="repeatId" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
    <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
        <label class="cell" for="nameInput${this.index}">Name:</label>
        <input class="cell" data-dojo-type="dijit/form/TextBox" id="nameInput${this.index}"
                            data-dojo-props="value: at('rel:', 'First')"></input>
        <input class="cell" data-dojo-type="dijit/form/TextBox"
                            data-dojo-props="value: at('rel:', 'Last')"></input>
    </div>
</div>
<h4>Repeat with mvc/Output for First and Last properties, will be updated when the TextBox is updated: </h4>
<div id="repeatIdOutput" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
    <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
        <label class="cell" for="nameOutput${this.index}">Name:</label>
        <div class="cell" data-dojo-type="dojox/mvc/Output" id="nameOutput${this.index}"
                            data-dojo-props="value: at('rel:', 'First')"></div>
        <div class="cell" data-dojo-type="dojox/mvc/Output"
                            data-dojo-props="value: at('rel:', 'Last')"></div>
    </div>
</div>
        </div>
<p>In the above example, the TextBoxes inside the repeat will display the firstname of each of the entries in the model.
        </div>