VDL Loops

In this example, the vdl repeat command is used to create the loop.

• The first Action returns the value 2.
• The second Action multiples the value by itself; The embedded vdl-repeat command executes the calculation 3 times, so the initial value is squared 3 times.

• The third action displays the final result in an on-screen element named logPanel.

View Designer

Code editor

    <script>
        function addToLog(vm, evt, value) {
            var logPanel = document.getElementById('log-panel');
            var logItem = document.createElement('div');
            logItem.classList.add('log-item');
            var date = (new Date()).getTime();
            var text = document.createTextNode(date + ': ' + value);
            logItem.appendChild(text);
            logPanel.appendChild(logItem);
            logPanel.scrollTo(0, 100000);
        }
    </script>
    <vdl-page>
        <vdl-header>
            <vdl-action-group name="demo2">
                <vdl-action command="=2"></vdl-action>
                <vdl-action command="=value * value" vdl-repeat="=num in [1,2,3]"></vdl-action>
                <vdl-action command="addToLog"></vdl-action>
            </vdl-action-group>
        </vdl-header>
        <vdl-section>
            <vdl-row>
                <vdl-column size="12">
                    <div id="log-panel"></div>
                    <vdl-button label="Trigger log" vdl-event="click: actions.demo2"></vdl-button>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>

This example view uses a VDL Action to call the following JavaScript function that adds an item prefixed with a timestamp to the Log Panel.

<script>
    function addToLog(vm, evt, value) {
        var logPanel = document.getElementById('log-panel');
        var logItem = document.createElement('div');
        logItem.classList.add('log-item');
        var date = (new Date()).getTime();
        var text = document.createTextNode(date + ': ' + value);
        logItem.appendChild(text);
        logPanel.appendChild(logItem);
        logPanel.scrollTo(0,100000);
    }
</script>

Code editor

<vdl-action-group name="demo1">
    <vdl-action command="=99"></vdl-action>
    <vdl-action command="addToLog"></vdl-action>
</vdl-action-group>