A template slot which allows the body content of an element to be set from the data in the template.
See also cf2:cst.ValueSlot.
This element supports all the style properties that apply to the span element; by default:
cst|value {
display: inline;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| component | A reference to a component. The client-side value is the object representation of the component. | xs:string | optional | ||
| path | The JSON path pointing to the value which must be used as the body content of the selected element. It is resolved relative to the property-value attribute if specified, or the current context property-value. See also Client-side templates. |
cf2:JSONPath | optional | ||
| property-value | A reference to an observable property of a component. The client-side value is the value of the property retrieved immediately prior to it being needed. It clears the current component, and sets the property used by this component as the default property. Refer to Client-side templates for further information about current components and default properties. |
xs:string | optional |
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:event="http://www.w3.org/2001/xml-events"
xmlns:template="http://www.volantis.com/xmlns/marlin-template"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:json="http://www.volantis.com/xmlns/2009/07/json">
<head>
<title>Client Side Template</title>
</head>
<body>
<div>
<p>Template with switch property containing several slots linked to json
data</p>
<cst:template id="t1" data="json1">
<cst:switch path="datatype">
<cst:case string="image">
<cst:a href="href">
<cst:image path="icon"/>
</cst:a>
</cst:case>
<cst:case string="text">
<cst:a href="href">
<cst:value path="name"/>
</cst:a>
</cst:case>
<cst:otherwise style="display: block">
<span>unknown type '<cst:value path="datatype"/>'</span>
</cst:otherwise>
</cst:switch>
</cst:template>
<mcs:br/>
<ui:button id="b1">
<span>Use first (image) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json1"/>
</ui:button>
<ui:button id="b2">
<span>Use second (text) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json2"/>
</ui:button>
<ui:button id="b3">
<span>Use third (unknown) data set</span>
<cf2:on event="cf2:activate" set="t1#data" component="json3"/>
</ui:button>
</div>
<div>
<json:inline id="json1">
<json:object>
<json:property name="datatype">
<json:string>image</json:string>
</json:property>
<json:property name="name">
<json:string>Cow</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img5.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Cow alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=cow</json:string>
</json:property>
</json:object>
</json:inline>
<json:inline id="json2">
<json:object>
<json:property name="datatype">
<json:string>text</json:string>
</json:property>
<json:property name="name">
<json:string>Horse</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img4.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Horse alternate text</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="href">
<json:string>http://www.google.com/m/search?site=images&q=horse</json:string>
</json:property>
</json:object>
</json:inline>
<json:inline id="json3">
<json:object>
<json:property name="datatype">
<json:string>non-existing-datatype</json:string>
</json:property>
</json:object>
</json:inline>
</div>
</body>
</html>