This example uses a new Person type defined in markup:
<j:module targetNamespace="urn:myapp">
<j:type name="Person">
<j:property name="firstName" />
<j:property name="lastName" />
</j:type>
</j:module>
The App creating a dataset with two People instances in it and uses bindings:
<j:App>
<j:data>
<j:DataSet id="people" xmlns:myapp="urn:myapp">
<myapp:Person id="fred" firstName="Fred" lastName="Flintstone" />
<myapp:Person id="betty" firstName="Betty" lastName="Rubble" />
</j:DataSet>
</j:data>
Fred's firstName:
<j:Label text="#bind(data.people.fred.firstName)"/> <br/>
Betty's lastName:
<j:Label text="#bind(data.people.betty.lastName)"/>
</j:App>
The pevious example uses an external file-based Xml dataset as the source of its data. In this example we'll create a new one from scratch.
This page demonstrates:
Jitsu uses a typed approach to data. Application writers introduce new types of data by writing a type module . Once you have defined some types in a type module, you can use those types on a page.
See Data Language for more information on the Jitsu Xml data language.
Though in this case we're defining types in Xml, the page compiler actually compiles our Xml types into JavaScript classes.
That's why we use JavaScript's naming conventions for types and properties - Jitsu lets you have consistent names between code and markup.
The Jitsu typing system is fairly straightforward, provides greater compile-time checking, data conversion flexibility and performance than an untyped alternatives like pure Xml/Xpath.
Here is the markup for defining a new Person type:
<j:module targetNamespace="urn:myapp">
<j:type name="Person">
<j:property name="firstName" />
<j:property name="lastName" />
</j:type>
</j:module>
The Jitsu <j:module> element introduces new data types and controls. In this page, we are defining a "Person" data type. Person has two properties, firstName and lastName. By default, Jitsu assumes that properties are of type "string" unless you indicate otherwise.
The <j:module> has a targetNamespace attribute. Jitsu uses Xml namespaces to identify types in a page. Throughout the rest of the document, elements tagged with the namespace "urn:myapp" will be associated with types defined in this module. Since only the "Person" type is defined in this module, you'll get an error from the compiler if you try to use any other element in the "myapp" namespace other than "Person".
The <j:module> appears at the top of the HTML file, outside the page's <body>.
Definitions must be introduced at the start of the document, before the page's body - and outside of any <j:App>s on the page. This is one exception to the rule that all Jitsu-specific markup should appear within a <j:App> block. The reason for this is that the <j:module> section defines new types used within applications - and these must be completely defined before the page compiler starts parsing the application itself.
The next step is to create a dataset. This appears inside the <j:data> element within the app, and looks like:
<j:DataSet id="people" xmlns:myapp="urn:myapp">
<myapp:Person firstName="Fred" lastName="Flintstone" />
<myapp:Person firstName="Betty" lastName="Rubble" />
</j:DataSet>
Here we are creating a new dataset called "people". The dataset contains two Person objects.
Again we are using namespaces. The Person objects in this dataset use the "myapp" namespace that we declared earlier - that's how the compiler knows what's going on in the dataset - it can recognize the "Person" type declared in the <module> earlier since both share the same namespace.
The final step is to create some Labels whose text binds to the people dataset. This is very similar to the first databinding example we saw.
First person's firstName:
<j:Label text="#bind(data.people.fred.firstName)"/>
Which inserts fred's firstName onto the page.
The example on this page works with a "static" dataset. Jitsu also supports active datasets , datasets that have active data loaded from a database.