11.6. DataView Binding
DataView binding can be carried out declaratively, programmatically, or via a mixture of the two. Let's look at declarative binding first.
11.6.1. Declarative Binding
In the first example, you will create an array of people consisting of a person's name and age and then bind it declaratively:
Press F5 to run your application, and you should see a screen similar to Figure 11-1.
Figure 11.1. Programatic data binding
The preceding example created an array called people, imported the namespaces that DataView uses in the document's <body> tag, and then bound the items in the peopleView with dataview:data="{{people}}" and specified where items should appear with the {{Property}} syntax.
This approach is very open to corruption by meddling designers. It certainly isn't XHTML-compliant, and it is a bit fiddly to debug. A better, more flexible approach is to use programmatic binding.
11.6.2. Programmatic Binding
You will now see how to produce the same result programmatically:
Copy the dataviewDeclarative.htm file, and rename the new copy to dataviewProgrammatic.htm.
Replace the <script> tag with the following:
<script type="text/javascript"> Sys.require([Sys.components.dataView], function() { var people = [ { Name: "Alex Mackey", Age: "28" }, { Name: "Sharyn Mackey", Age: "35" }, { Name: "Brett Chaney", Age: "33" }, { Name: "Jenny Chia", Age: "24" } ]; Sys.create.dataView('#peopleView', { data: people }); }); </script>
Now replace the <body> tag with the following:
<body> <div id="peopleView" class="sys-template"> <div class="dataItem"> {{ $index }}, {{ Name }}, aged: {{ Age }} <hr /> </div> </div> </body>
Simple, huh? First, you told the AJAX libraries that you will need the DataView scripts with the Sys.Require call. You then created an array of people. You then used the new functionality in the AJAX libraries to create a DataView and set the people array to the data property. Finally, in the HTML, you defined where data items should be bound to.
11.6.3. A Cleaner Programmatic Binding
The previous example still utilizes custom tags to perform the binding. The AJAX libraries offer an even better method by handling the itemRendered event that allows no binding tags at all. To accomplish this task, you will intercept the itemRendered event and then target the spans you want to change with the innerHTML property:
Copy the file dataviewProgrammatic.htm, and rename it to dataviewOnRendered.htm.
Replace the existing <script> block with the following:
<script type="text/javascript"> Sys.require([Sys.components.dataView], function() { var people = [ { Name: "Alex Mackey", Age: "28" }, { Name: "Sharyn Mackey", Age: "35" }, { Name: "Brett Chaney", Age: "33" }, { Name: "Jenny Chia", Age: "24" } ]; Sys.create.dataView('#peopleView', { data: people, itemRendered: onRendered }); }); function onRendered(dataview, ctx) { Sys.bind(Sys.get(".name", ctx), "innerHTML", ctx.dataItem, "Name"); Sys.bind(Sys.get(".age", ctx), "innerHTML", ctx.dataItem, "Age"); } </script>
This code creates a DataView, setting the newly created people array to the data property. Because you don't want to meddle with the HTML, you create a function called onRendered() to handle the itemRendered event. In this function, you then access the HTML elements with the classes name and age and set their innerHTML properties to the bound item's name and age properties.