Spry Review Part3(JP)
In the second issue as a series of articles, I introduced how to use a loaded data with Spry in last month. The last of these, I will introduce how you use another data set in a data set.
You can see the preview here.
You can see the preview here.
Namespace
It is used in the same way as xmlns in XML like "namespace::data" when you use the data in another name space. The "{dsAlbum::folder}" refers to a current value named "folder" in the dsAlbum.
var dsAlbum = new Spry.Data.XMLDataSet("album.xml", "/contents/album"); var dsPhoto = new Spry.Data.XMLDataSet("{dsAlbum::folder}.xml", "/album/pic");
The onChange event will be occur when a user clicks a different item in the list, and the "dsAlbum" in it will invoke the setCurrentRow() method with a value of the selected item. The method changes the current row in the data set. Next, the "dsPhoto" will invoke loadData() method with the current value to reload its own data set.
<div id="albumList" spry:region="dsAlbum"> アルバム<br> <select onChange="dsAlbum.setCurrentRow(this.value);dsPhoto.loadData();" spry:repeatchildren="dsAlbum"> <option value="{ds_RowID}">{name}</option> </select> </div>
The {} tags of a folder and a image will be displace with a real string dynamically. Notice that two data is set in the 'spry:detaionregion' attribute of a div tag.
<div id="photo" spry:detailregion="dsPhoto dsAlbum"> <img src="{dsAlbum::folder}/{dsPhoto::url}"> </div>
A xml loaded into dsPhoto (gab.xml)
<?xml version="1.0" encoding="UTF-8" ?><album><pic><url>IMG_4577_small.jpg</url></pic><pic><url>IMG_4580_small.jpg</url></pic><pic><url>IMG_4583_small.jpg</url></pic><pic><url>IMG_4598_small.jpg</url></pic><pic><url>IMG_4600_small.jpg</url></pic><pic><url>IMG_4603_small.jpg</url></pic><pic><url>IMG_4608_small.jpg</url></pic><pic><url>IMG_4609_small.jpg</url></pic><pic><url>IMG_4612_small.jpg</url></pic><pic><url>IMG_4627_small.jpg</url></pic><pic><url>IMG_4633_small.jpg</url></pic><pic><url>IMG_4639_small.jpg</url></pic><pic><url>IMG_4656_small.jpg</url></pic><pic><url>IMG_4665_small.jpg</url></pic><pic><url>IMG_4668_small.jpg</url></pic></album>