Here's the markup for this App:

    <j:App>


        <j:data>


            <j:DataSet id='photos' src='file:tour_data.xml#photos'/>


        </j:data>


        


        <img src='#bind(data.photos.spidey.imageUrl)' 


             height='200'/>





        <j:Label text='#bind(data.photos.spidey.title)' tagName='h2'/>


    </j:App>

Description

One of the coolest things about Jitsu is that it contains a powerful client-side data binding engine, accessed via binding expressions . Above is a simple example that uses Jitsu's data binding to present some values from data.

Look Ma, no Xml

Even though this page is authored in Xml, the Jitsu runtime is not Xml based . At runtime, we do not use the Xml DOM, XPath, etc. Instead, all bindings are converted into efficient JavaScript.

Similar to the HTML DOM, we found that accessing Xml documents via XPath in JavaScript is slow. By comparison, creating, accessing and updating JavaScript objects is fast. Furthermore, we wanted to add support for features not found in Xml, such as reflection, type information, property validators and change notification. To add these features, we implemented our own JavaScript object-based DataSets.

In this example, we have added a dataset to our app, via the line:

    <j:DataSet id="photos" src="file:tour_data.xml#photos"/>
    

The src attribute tells Jitsu where to load the DataSet from - in this case we are fetching a static dataset called "photos" from the file "tour_data.xml". The file tour_data.xml must conform to the Jitsu Data Language. See Data Language for more on the Jitsu data langage.

The id attribute indicates what the DataSet will be known as within this application - in this case we just call the DataSet "photos".

Next, the page places down an image and a header.

    <img src="#bind(data.photos.spidey.imageUrl)"/>
    

The highlighted text is a binding expression. You use #bind() to create data bindings between controls and data. At runtime, when the page is shown to the user, the content of the label control is dynamically generated by Jitsu by following the binding path.

Runtime Expressions

Let's look at the binding path:

    
    data.photos.spidey.imageUrl
    

The "data.photos" part navigates to the dataset called "photos" we loaded into this page. The ".spidey" gets the item in the dataset whose id is "spidey" - a Photo in the dataset. Finally, the ".imageUrl" binds to the photo's imageUrl property.

So we are setting the image's Url to the value loaded from the dataset.

Below the image, we also have a label showing the image title, wrapped in an h3 tag:

    <Label text="#bind(data.photos.spidey.title)"/>
    

Label is a control provided by Jitsu as convenient way to show the user some text from a dataset - by default it renders in HTML as a <span> element whose content is the value of the label's text property.

The other tours in this section look at other ways you can use #bind().