Attribute

To bind values to HTML element attributes in Kooboo, you can use the syntax "k-attribute='name value'", and separate multiple attributes with a semicolon (;).

Alternatively, in Vue, you can use the "v-bind:attributeName" or the shorthand ":attributeName" syntax.

k-attribute

Single property attribute example:

<script env="server">
   var value1 = "value1";  
</script>  
<div>
    <div k-attribute="data value1"> text</div>
</div>

Result

<div>
    <div data="value1"> text</div>
</div>

Multiple Attributes Example:

<script env="server">
	var value1 = "value1";
	var value2 = "value2" 
</script>
<div>
	<div k-attribute="data value1;data2 prefix_{value2}"> text</div>
</div>

Result

<div>
	<div data="value1" data2="prefix_value2"> text</div>
</div>

JS Function Call example:

<script env="server">
	var value1 = "value1";
	function attValue(input) {
	    return input + "End";
	} 
</script>
<div>
	<div k-attribute="data attValue(value1)"> text</div>
</div>

Result

<div>
    <div data="value1End"> text</div>
</div>

Class attribute is special, can use Json object, for example:

<div env="server">
	<script>
		var para = "text";
		function checkactive(input) {
		    return input === "text";
		} 
	</script>
	<div k-attribute="class { isActive: checkactive(para), otherclass: true, nomatch:checkactive('nomatch')}"></div>
</div>

Result

<div>
	
	<div class="isActive otherclass"></div>
</div>

Vue Syntax

Single attribute

<script env="server">
	var value1 = "attvalue1";  
</script>
<div env="server">
	<div v-bind:data="value1"> text</div>
</div>

Result

<div>
    <div data="attvalue1"> text</div>
</div>

Multiple attributes

<script env="server">
	var value1 = "attValue1";
	var value2 = "attValue2" 
</script>
<div env="server">
	<div v-bind:data="value1" v-bind:data2="prefix_{value2}"> text</div>
</div>

Result

<div>
	<div data="attValue1" data2="prefix_attValue2"> text</div>
</div>

JS function

<script env="server">
	var value1 = "value1";
	function attValue(input) {
	    return input + "End";
	} 
</script>
<div env="server">
	<div v-bind:data="attValue(value1)"> text</div>
</div>

Result

<div>
	<div data="value1End"> text</div>
</div>

class attribute

<div env="server">
	<script>
		var para = "text";
		function checkactive(input) {
		    return input === "text";
		} 
	</script>
	<div :class="{ isActive: checkactive(para), otherclass: true, nomatch:checkactive('nomatch')}"></div>
</div>

Result

<div>
	
	<div class="isActive otherclass"></div>
</div>