For

The behavior of the "k-for" directive in Kooboo is very similar to the "v-for" directive in VueJS. You can use it to iterate over an array or an object.

Code examples：

k-for Array

<script env="server">
	var list = [];
	list.push({ name: "nameone" });
	list.push({ name: "nametwo" });
</script>
<div k-for="item in list">
	<h2 k-content="item.name">name</h2>
</div>

v-for Array + Index

<script env="server">
	var list = [];
	list.push({ name: "nameone" });
	list.push({ name: "nametwo" });
</script>
<div env="server" v-for="(item, index) in list" repeat-self="true">
	<span v-html="index">number </span> : <span v-html="item.name">name</span>
</div>

k-for Number

<div k-for="n in 10">
	<h2 k-content="n"> from 1 to 10</h2>
</div>

<div k-for="1, 4">
	<h2>repeated 4 times</h2>
</div>

<div k-for="1, 4, alias">
	<h2 k-content="alias">number</h2>
</div>

v-for Number

Exactly same as k-for

<div env="server">
	<div v-for="n in 10">
		<h2 v-html="n"> from 1 to 10</h2>
	</div>

	<div v-for="1, 4">
		<h2>repeated 4 times</h2>
	</div>

	<div v-for="1, 4, alias">
		<h2 v-html="alias">number</h2>
	</div> 
</div>

k-for Object

<div env="server">
	<script>
		var obj = { firstname: "Joe", lastname: "Vincent" }; 
	</script>
	<div k-for="(value, key) in obj">
		<span k-content="key">key</span> : <span k-content="value">name</span>
	</div> 
</div>

v-for Object

Code

<div env="server">
	<script>
		var obj = { firstname: "Joe", lastname: "Vincent" }; 
	</script>
	<div v-for="(value, key) in obj">
		<span v-text="key">key</span> : <span v-text="value">name</span>
	</div> 
</div>

Result

<div>
	
	<div>
		<span>firstname</span> : <span>Joe</span>
	</div><div>
		<span>lastname</span> : <span>Vincent</span>
	</div> 
</div>

v-for Object + Index

<div env="server">
	<script>
		var obj = { firstname: "Joe", lastname: "Vincent" }; 
	</script>
	<div v-for="(value, name, index) in obj">
		<span v-text="index"></span> <span v-text="name">key</span> : <span v-text="value">name</span>
	</div>
</div>

v-for Object with naming binding

<script env=server>
	var list = [];
	list.push({ firstname: "firstname1", two: "twovalue1" });
	list.push({ firstname: "firstname2", two: "twovalue2" }); 
</script>
<div env='server' v-for="{firstname, two, three} in list">
	<p>{{firstname}}_{{two}}_{{three}}</p>
</div>

repeat-self

Whether current element should be included in the repeating or not. Default value is false.

Code

<script env="server">
	var list = [];
	list.push({ name: "nameone" });
	list.push({ name: "nametwo" });
</script>
<div k-for="item in list" repeat-self="false">
	<h2 k-content="item.name">name</h2>
</div>

Result

<div>
	<h2>nameone</h2>

	<h2>nametwo</h2>
</div>

Code

<script env="server">
	var list = [];
	list.push({ name: "nameone" });
	list.push({ name: "nametwo" });
</script>
<div k-for="item in list" repeat-self="true">
	<h2 k-content="item.name">name</h2>
</div>

Result

<div>
	<h2>nameone</h2>
</div><div>
	<h2>nametwo</h2>
</div>