Spry学习(二)----XML数据集及主从表显示

页面代码：

test.html

 1 < head >
 2      < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
 3      < title > Spry Example </ title >
 4     
 5      <!-- Link the Spry libraries -->
 6      < script  type ="text/javascript"  src ="includes/xpath.js" ></ script >
 7      < script  type ="text/javascript"  src ="includes/SpryData.js" ></ script >
 8     
 9      <!-- Create a data set object -->
10      < script  type ="text/javascript" >
11        var dsSpecials = new Spry.Data.XMLDataSet("data.xml", "specials/menu_item");
12        var dsIngredients = new Spry.Data.XMLDataSet('{dsSpecials::url}', "item/ingredients/ingredient");
13     </ script >
14 </ head >
15
16 < body >
17
18      <!-- Create the Spry dynamic region -->
19      < div  id ="Specials_DIV"  spry:region ="dsSpecials" >
20      <!-- Display the data in a table -->
21          < table  id ="Specials_Table" >
22          < tr >
23              < th > 名称 </ th >
24              < th > Description </ th >
25              < th > 价格 </ th >
26          </ tr >
27          <!-- <tr spry:repeat="dsSpecials"> -->
28          < tr  spry:repeat ="dsSpecials"  onclick ="dsSpecials.setCurrentRow('{ds_RowID}')" >
29              < td > {item} </ td >
30              < td > {description} </ td >
31              < td > {price} </ td >
32          </ tr >
33          </ table >
34      </ div >
35 < hr >
36      <!-- Create the detail dynamic region -->
37      < div  id ="Specials_Detail_DIV"  spry:region ="dsIngredients" >
38          < table  id ="Specials_Detail_Table" >
39          < tr >
40              < th > Ingredients </ th >
41          </ tr >
42          < tr  spry:repeat ="dsIngredients" >
43              < td > {name} </ td >
44          </ tr >
45          </ table >
46      </ div >
47 </ body >

data.xml

<? xml version="1.0" encoding="UTF-8" ?>
< specials >
     < menu_item  id ="1" >
         < item > 夏日沙拉 </ item >
         < description > organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette. </ description >
         < price > 7 </ price >
         < url > summersalad.xml?id=1 </ url >
     </ menu_item >
     < menu_item  id ="2" >
         < item > Thai Noodle Salad </ item >
         < description > lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions. </ description >
         < price > 8 </ price >
         < url > thainoodles.xml </ url >
     </ menu_item >
     < menu_item  id ="3" >
         < item > Grilled Pacific Salmon </ item >
         < description > served with new potatoes, diced beets, Italian parlsey, and lemon zest. </ description >
         < price > 16 </ price >
         < url > salmon.xml </ url >
     </ menu_item >
</ specials >

summersalad.xml

<? xml version="1.0" encoding="UTF-8" ?>
< item >
     < item_name > Summer salad </ item_name >
     < ingredients >
         < ingredient >
             < name > butter lettuce </ name >
         </ ingredient >
         < ingredient >
             < name > Macintosh 苹果 </ name >
         </ ingredient >
         < ingredient >
             < name > Blood oranges </ name >
         </ ingredient >
         < ingredient >
             < name > Gorgonzola cheese </ name >
         </ ingredient >
     </ ingredients >
</ item >

thainoodles.xml

<? xml version="1.0" encoding="UTF-8" ?>
< item >
     < item_name > Thain Noodles </ item_name >
     < ingredients >
         < ingredient >
             < name > Thain Noodle </ name >
         </ ingredient >
         < ingredient >
             < name > Macintosh apples </ name >
         </ ingredient >
     </ ingredients >
</ item >

salmon.xml

<? xml version="1.0" encoding="UTF-8" ?>
< item >
     < item_name > Salmon </ item_name >
     < ingredients >
         < ingredient >
             < name > Salmon </ name >
         </ ingredient >
         < ingredient >
             < name > parsley </ name >
         </ ingredient >
         < ingredient >
             < name > basil </ name >
         </ ingredient >
     </ ingredients >
</ item >