「データが無ければ別の何かを表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

データが無ければ別の何かを表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データが無ければ別の何かを表示</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function viewModel() {
var self = this;
self.tourism = ko.observableArray();
self.noData = ko.observable();
// 表示したいデータ：とりあえずコメントアウトしておく。
//self.tourism([
// { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
// { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
//]);
// データがあるかチェック。
if ( 0 < self.tourism().length ) {
// データがあるときはself.noDataは非表示。
self.noData(false);
}
else {
// データがないときはself.noDataは表示。
self.noData(true);
}
}
ko.applyBindings(new viewModel());
});
</script>
</head>
<body>
<h1>データが無ければ別の何かを表示</h1>
<table>
<thead>
<tr>
<th>地方</th>
<th>地域</th>
<th>種別</th>
<th>説明</th>
</tr>
</thead>
<tbody data-bind="foreach: tourism, visible: tourism">
<tr>
<td data-bind="text: local"></td>
<td data-bind="text: area"></td>
<td data-bind="text: kind"></td>
<td data-bind="text: description"></td>
</tr>
</tbody>
<tbody data-bind="visible: noData">
<tr>
<td colspan="4">値がないよ～</td>
</tr>
</tbody>
</table>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>