ifバインディングを使わずに真・偽で条件分岐:三項演算子

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ifバインディングを使わずに真・偽で条件分岐:三項演算子</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.       
  13.       // 表示するデータ群をいれる変数(?)
  14.       self.kuchiMenu = ko.observable();
  15.       // 表示するデータ
  16.       self.kuchiMenu([
  17.         {id: 1,  price: 100, taste: "タレ",           item: "ねぎ間"},
  18.         {id: 2,  price: 168, taste: "タレ・味噌",     item: "ハツ"},
  19.         {id: 3,  price: 130, taste: "味噌",           item: "レバー"},
  20.         {id: 4,  price: 110, taste: "塩・味噌",       item: "ぼんちり"},
  21.         {id: 5,  price: 100, taste: "塩・タレ・味噌", item: "はらみ"},
  22.         {id: 6,  price: 136, taste: "塩・タレ・味噌", item: "うずら玉子"},
  23.         {id: 7,  price: 136, taste: "塩・味噌",       item: "なんこつ"},
  24.         {id: 8,  price: 136, taste: "味噌",           item: "手羽先"},
  25.         {id: 9,  price: 136, taste: "塩",             item: "せせり"},
  26.         {id: 10, price: 136, taste: "タレ",           item: "白レバー"},
  27.         {id: 12, price: 136, taste: "塩・タレ",       item: "砂肝"},
  28.         {id: 13, price: 100, taste: "塩・タレ・味噌", item: "豚バラ"},
  29.         {id: 14, price: 125, taste: "タレ",           item: "つくね"},
  30.         {id: 15, price: 168, taste: "タレ・味噌",     item: "ひな皮"},
  31.         {id: 16, price: 168, taste: "味噌",           item: "ももにんにく"},
  32.         {id: 17, price: 136, taste: "塩・タレ",       item: "トントロ"},
  33.         {id: 18, price: 136, taste: "タレ・味噌",     item: "アスパラベーコン"},
  34.         {id: 11, price: 100, taste: "塩・味噌",       item: "トマトベーコン"},
  35.         {id: 19, price: 290, taste: "塩",             item: "丸ごとシマウマ"}
  36.       ]);
  37.     }
  38.   
  39.     ko.applyBindings(new viewModel());
  40.   });
  41. </script>
  42. </head>
  43. <body>
  44. <h1>ifバインディングを使わずに真・偽で条件分岐:三項演算子</h1>
  45. 塩だけとその他で分岐させてみる。
  46. <table border="1">
  47. <thead>
  48.   <tr>
  49.   <th></th>
  50.   <th>品名</th>
  51.   <th>味</th>
  52.   <th>料金</th>
  53.   </tr>
  54. </thead>
  55. <tbody data-bind="foreach: kuchiMenu">
  56. <!-- ko template: { name: taste == '塩' ? 'SHIO' : 'HOKA' } --><!-- /ko -->
  57. </tbody>
  58. </table>
  59. <script type="text/html" id="SHIO">
  60.   <tr>
  61.   <td>★</td>
  62.   <td data-bind="text: item"></td>
  63.   <td data-bind="style: {fontWeight: 'bold', color:'red'}, text: taste"></td>
  64.   <td data-bind="text: price"></td>
  65.   </tr>
  66. </script>
  67. <script type="text/html" id="HOKA">
  68.   <tr>
  69.   <td>○</td>
  70.   <td data-bind="text: item"></td>
  71.   <td data-bind="text: taste"></td>
  72.   <td data-bind="text: price"></td>
  73.   </tr>
  74. </script>
  75. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  76. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  77. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  78. </div>
  79. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  80. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  81. </div>
  82. </body>
  83. </html>