Adobe Spry　条件に一致したデータを表示する


　Spryはデータ内の値（文字列）によって表示するかどうか指定することもできます。例えば以下のサンプルで果物の色が赤色のものだけ表示させてみます。この場合spry:when属性に条件式を書きます。この条件式は「'{Color}' == '赤色'」とします。これはColorデータの値が文字列の赤色だったらデータを表示する、ということになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>一致するデータだけを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" },
{ fruits: "レモン", Color: "黄色" },
{ fruits: "トマト", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<div spry:choose="spry:choose">
<span spry:when="'{Color}' == '赤色'">{fruits}は{Color}です。</span>
</div>
</div>
</div>
</body>
</html>

　逆に赤色ではないものだけを表示させたい場合には条件式の==を!=に変えます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>一致するデータだけを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色", Type:"ABCD" },
{ fruits: "ミカン", Color: "橙色", Type:"CDE" },
{ fruits: "メロン", Color: "緑色", Type:"EFGH" },
{ fruits: "イチゴ", Color: "赤色", Type:"GHIJK" },
{ fruits: "レモン", Color: "黄色", Type:"JKL" },
{ fruits: "トマト", Color: "赤色", Type:"ABCXYZ" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<div spry:choose="spry:choose">
<span spry:when="'{Color}' != '赤色'">{fruits}は{Color}です。</span>
</div>
</div>
</div>
</body>
</html>

　データ内に一部の文字が含まれている場合のみ表示することもできます。この場合spry:when属性の条件式は「'{fruits}'.search('ン') != -1」とします。これで果物の名前にカタカナの「ン」が含まれている場合のみデータが表示されます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>一致するデータだけを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色", Type:"ABCD" },
{ fruits: "ミカン", Color: "橙色", Type:"CDE" },
{ fruits: "メロン", Color: "緑色", Type:"EFGH" },
{ fruits: "イチゴ", Color: "赤色", Type:"GHIJK" },
{ fruits: "レモン", Color: "黄色", Type:"JKL" },
{ fruits: "トマト", Color: "赤色", Type:"ABCXYZ" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<div spry:choose="spry:choose">
<span spry:when="'{fruits}'.search('ン') != -1">{fruits}は{Color}です。</span>
</div>
</div>
</div>
</body>
</html>

search()は文字列を検索し見つかった位置を数字で返します。上記のサンプルは果物の名前のどこかに「ン」が含まれている場合にデータを表示しましたが、!= -1ではなく== 2とすると三番目の文字が「ン」の場合のみデータを表示することができます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>一致するデータだけを表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色", Type:"ABCD" },
{ fruits: "ミカン", Color: "橙色", Type:"CDE" },
{ fruits: "メロン", Color: "緑色", Type:"EFGH" },
{ fruits: "イチゴ", Color: "赤色", Type:"GHIJK" },
{ fruits: "レモン", Color: "黄色", Type:"JKL" },
{ fruits: "トマト", Color: "赤色", Type:"ABCXYZ" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<div spry:choose="spry:choose">
<span spry:when="'{fruits}'.search('ン') == 2">{fruits}は{Color}です。</span>
</div>
</div>
</div>
</body>
</html>

[目次へ]

(2006.7.25)