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

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>データが無ければ別の何かを表示</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     function viewModel() {
  11.       var self = this;
  12.       self.tourism = ko.observableArray();
  13.       self.noData = ko.observable();
  14.       // 表示したいデータ:とりあえずコメントアウトしておく。
  15.       //self.tourism([
  16.       //  { local: '九州地方', area: '太宰府', kind: '歴史遺産', description: '太宰府天満宮、大宰府政庁跡。', },
  17.       //  { local: '沖縄地方', area: '南城市知念地区', kind: '歴史遺産', description: '世界遺産である斎場御嶽。', },
  18.       //]);
  19.       // データがあるかチェック。
  20.       if ( 0 < self.tourism().length ) {
  21.         // データがあるときはself.noDataは非表示。
  22.         self.noData(false);
  23.       }
  24.       else {
  25.         // データがないときはself.noDataは表示。
  26.         self.noData(true);
  27.       }
  28.     }
  29.     ko.applyBindings(new viewModel());
  30.   });
  31. </script>
  32. </head>
  33. <body>
  34. <h1>データが無ければ別の何かを表示</h1>
  35. <table>
  36. <thead>
  37. <tr>
  38. <th>地方</th>
  39. <th>地域</th>
  40. <th>種別</th>
  41. <th>説明</th>
  42. </tr>
  43. </thead>
  44. <tbody data-bind="foreach: tourism, visible: tourism">
  45. <tr>
  46. <td data-bind="text: local"></td>
  47. <td data-bind="text: area"></td>
  48. <td data-bind="text: kind"></td>
  49. <td data-bind="text: description"></td>
  50. </tr>
  51. </tbody>
  52. <tbody data-bind="visible: noData">
  53. <tr>
  54. <td colspan="4">値がないよ~</td>
  55. </tr>
  56. </tbody>
  57. </table>
  58. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  59. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  60. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  61. </div>
  62. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  63. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  64. </div>
  65. </body>
  66. </html>