HTML:--
<div>
<ul c-loop='main>>a'>
<ul c-loop='a.main>>a'>
<li>{a.name}</li>
</ul>
</ul>
</div>#Output :-
function(_, cX) {
return (
cX.render("div", {},
cX.render("ul", {},
_.main.map(function(a) {
return (
cX.render("ul", {},
a.main.map(function(a) {
return (cX.render("li", {}, a.name))
})
)
)
})
)
)
)
}HTML:-
<div>
<Click :title='name'/>
<Click title='This is best'/>
<ul c-loop='main>>a'>
<Click :title='a.name' :map='hey'/>
</ul>
</div>Output Generated by Indo-compiler:-
function(_, cX) {
const Props_click_1 = {
"title": _.name,
"c-id": "cl-click-1"
};
const Props_click_2 = {
"title": "This is best",
"c-id": "cl-click-2"
};
return (
cX.render("div", {},
cX.render(
cX.childRender(cX, Click, "cl-click-1" , Props_click_1),
{ "c-id": "cl-click-1"},
),
cX.render(
cX.childRender(cX, Click, "cl-click-2" , Props_click_2),{"c-id": "cl-click-2"}, ),
cX.render("ul", {},
_.main.map(function(a) {
const Props_click_3 = {
"title": a.name,
"map": _.hey,
"c-id": "cl-click-3"
};
return (
cX.render(
cX.childRender(cX, Click,"cl-click-3", Props_click_3),
{"c-id": "cl-click-3"},
)
)
})
)
)
)
}HTML with conditional rendering and loop: -
<div>
<Click :title='name' />
<ul c-loop='olo>>a'>
<li>
<h1>{b.name} {a.name} {outer}</h1>
<Click :title='a.name' :map='hey' c-if='outer'/>
<ul c-loop='a.innerMain>>b'>
<li>
<h1>{b.name} {a.name} {outer}</h1>
<Click title='Inner' :map='olo' />
<ul c-loop='b.name>>c'>
<li>
<h2>{a.name} {b.name} {c.name} {olo} {a.innerMain}</h2>
<Click title='Inner' :map='olo' />
<ul c-loop='fromOut>>x'>
<li>
<Click :title='a.name + b.name' :data='x' />
<ul c-loop='x.main>>y'>
<li>
<Click :title='a.name + b.name' :data='x' />
<ul c-loop='y.main>>z'>
<li>
<Click :title='a.name + b.name' :data='x' :main='fromOut' />
<h1>
{a.name}
{b.name.main.name.name}
{c.name.health.name.main.uname.cname.carry}
{d.name.last.main.uname}
{x.name.last.mama.baba.mom.dad.brp.sis.me.gf.wife}
{y.name.last.oooa.lala}
</h1>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>Output Generated by Indo-compiler:-
function(_, cX) {
const Props_click_1 = {
"title": _.name,
"c-id": "cl-click-1"
};
return (cX.render("div", {}, cX.render(cX.childRender(cX, Click, "cl-click-1", Props_click_1), {
"c-id": "cl-click-1"
}, ), cX.render("ul", {}, _.olo.map(function(a) {
const Props_click_2 = {
"title": a.name,
"map": _.hey,
"c-if": "outer",
"c-id": "cl-click-2"
};
return (cX.render("li", {}, cX.render("h1", {}, _.b.name, a.name, _.outer), (_.outer ? cX.render(cX.childRender(cX, Click, "cl-click-2", Props_click_2), {
"c-id": "cl-click-2"
}, ) : false), cX.render("ul", {}, a.innerMain.map(function(b) {
const Props_click_3 = {
"title": "Inner",
"map": _.olo,
"c-id": "cl-click-3"
};
return (cX.render("li", {}, cX.render("h1", {}, b.name, a.name, _.outer), cX.render(cX.childRender(cX, Click, "cl-click-3", Props_click_3), {
"c-id": "cl-click-3"
}, ), cX.render("ul", {}, b.name.map(function(c) {
const Props_click_4 = {
"title": "Inner",
"map": _.olo,
"c-id": "cl-click-4"
};
return (cX.render("li", {}, cX.render("h2", {}, a.name, b.name, c.name, _.olo, a.innerMain), cX.render(cX.childRender(cX, Click, "cl-click-4", Props_click_4), {
"c-id": "cl-click-4"
}, ), cX.render("ul", {}, _.fromOut.map(function(x) {
const Props_click_5 = {
"title": a.name + b.name,
"data": x,
"c-id": "cl-click-5"
};
return (cX.render("li", {}, cX.render(cX.childRender(cX, Click, "cl-click-5", Props_click_5), {
"c-id": "cl-click-5"
}, ), cX.render("ul", {}, x.main.map(function(y) {
const Props_click_6 = {
"title": a.name + b.name,
"data": x,
"c-id": "cl-click-6"
};
return (cX.render("li", {}, cX.render(cX.childRender(cX, Click, "cl-click-6", Props_click_6), {
"c-id": "cl-click-6"
}, ), cX.render("ul", {}, y.main.map(function(z) {
const Props_click_7 = {
"title": a.name + b.name,
"data": x,
"main": _.fromOut,
"c-id": "cl-click-7"
};
return (cX.render("li", {}, cX.render(cX.childRender(cX, Click, "cl-click-7", Props_click_7), {
"c-id": "cl-click-7"
}, ), cX.render("h1", {}, a.name, b.name.main.name.name, c.name.health.name.main.uname.cname.carry, _.d.name.last.main.uname, x.name.last.mama.baba.mom.dad.brp.sis.me.gf.wife, y.name.last.oooa.lala)))
}))))
}))))
}))))
}))))
}))))
}))))
}