「ifバインディングを使わずに真・偽で条件分岐：三項演算子」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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