Using synthetic resources with Sightly

_nodes.txt

/content
    /example
        @jcr:primaryType = "nt:unstructured"
        @jcr:title = "Outer Component"
        @sling:resourceType = "example/components/outer"
/apps
    /example
        /components
            /inner
                @jcr:primaryType = "cq:Component"
                /inner.html
                /inner.js
            /outer
                @jcr:primaryType = "cq:Component"
                /outer.html
                /outer.js

_output.html

<div class="outer">
    <h1>Outer Component</h1>
    <ul>
        <li>
            <div class="inner">
                <h2>Inner Component One</h2>
                <p>Hello World!</p>
            </div>
        </li>
        <li>
            <div class="inner">
                <h2>Inner Component Two</h2>
            </div>
        </li>
    </ul>
</div>

inner.html

<div class="inner">
    <h2>${properties.jcr:title}</h2>
    <p>${properties.text}</p>
</div>

outer.html

<div class="outer" data-sly-use.logic="outer.js">
    <h1>${properties.jcr:title}</h1>
    <ul data-sly-list="${logic.children}">
        <li data-sly-resource="${item}"></li>
    </ul>
</div>

outer.js

use(function () {
    return {
        children:  [
            {
                resourceName: "one",
                "sling:resourceType": "example2/components/inner",
                "jcr:title": "Inner Component One",
                "text": "Hello World!"
            },
            {
                resourceName: "two",
                "sling:resourceType": "example2/components/inner",
                "jcr:title": "Inner Component Two"
            }
        ]
    }
});