Nijor provides a simple way to render repeated content using the n:loop attribute. Loops are useful when you want to render a list of items from an array.
A loop must be declared on a parent element. This is usually a div, but any suitable element can be used. You can't add id attribute to the element.
The n:loop attribute works together with two other attributes : source and var.
source refers to the array variable defined in script, and var defines the variable name used for each item during iteration.
<import name="house" source="@/components/houses.nijor">
<body>
<div n:loop var="x" source="houses">
<house name="{x.name}" rent="₹{x.rent}" location="{x.location}"></house>
</div>
</body>
<script>
const houses = [
{ name : "The Sky Mansion", rent: 62000, location: "Hengrabari, Guwahati" },
{ name : "The Octagon Mansion", rent: 30000, location: "Ganeshguri, Guwahati" },
{ name : "The Dragon Palace", rent: 45000, location: "Chacal, Guwahati" },
];
</script>
<import name="house" source="@/components/houses.nijor">
<body>
<div n:loop var="x" source="$.houses">
<house name="{x.name}" rent="₹{x.rent}" location="{x.location}"></house>
</div>
<button on:click="more()">Load More</button>
</body>
<script>
$.houses = [
{ name : "The Sky Mansion", rent: 62000, location: "Hengrabari, Guwahati" },
{ name : "The Octagon Mansion", rent: 30000, location: "Ganeshguri, Guwahati" },
{ name : "The Dragon Palace", rent: 45000, location: "Chacal, Guwahati" },
];
async function more($){
const moreHouses = await fetch(...);
$.houses = [... $.houses, moreHouses]; // The entire loop would be rerendered, even those entries which didn't change
}
</script>