データが無ければ別の何かを表示
- <!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;">
- Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
- </div>
- </body>
- </html>