Duplicator

Beta component that repeats its template once per item of a data-source array, each copy bound to its own item in an independent scope

Live preview

Open in new tab ↗

BETA VERSION. This component is a bit special component because it can duplicate same content several times with diffferent data-source. Imaging some text editor with tabs which each tab contains different content. For this case is targeted j-Duplicator. Follow example.

Configuration:

  • datasource {Array} must contain array of content for duplicating
  • url {String} optional, can contain a link to external template without JavaScript

Good to know:

This component appends .scopename() function to each item of Array for handling of scope and each content is wrapped in to the independent scope with direct reference to main source.

Advanced templating

<ui-component name="duplicator" path="mytab" config="datasource:tabs" class="invisible">

    <script type="text/html" data-id="PRODUCT">
        <ui-component name="input" path="?.name">Name</ui-component>
    </script>

    <script type="text/html" data-id="USER">
        <ui-component name="input" path="?.age">Age</ui-component>
    </script>

    <!-- DYNAMIC -->
    <script type="text/html" data-id="ORDER" data-url="/templates/orders.html"></script>
</ui-component>

<script>

    // All tabs
    var tabs = [];
    tabs.push({ template: 'PRODUCT', name: 'iPhone X' });
    tabs.push({ template: 'USER', age: 30 });
    tabs.push({ template: 'ORDER', price: 324 });

    // Choose a default open tab
    var mytab = tabs[0];

</script>

More UI components

Browse all 348