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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ifバインディングを使わずに真・偽で条件分岐：三項演算子２</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.kuchiMenu = ko.observable();
// 表示するデータ
self.kuchiMenu([
{id: 1, price: 100, taste: "タレ", item: "ねぎ間"},
{id: 2, price: 168, taste: "タレ・味噌", item: "ハツ"},
{id: 3, price: 130, taste: "味噌", item: "レバー"},
{id: 4, price: 110, taste: "塩・味噌", item: "ぼんちり"},
{id: 5, price: 100, taste: "塩・タレ・味噌", item: "はらみ"},
{id: 6, price: 136, taste: "塩・タレ・味噌", item: "うずら玉子"},
{id: 7, price: 136, taste: "塩・味噌", item: "なんこつ"},
{id: 8, price: 136, taste: "味噌", item: "手羽先"},
{id: 9, price: 136, taste: "塩", item: "せせり"},
{id: 10, price: 136, taste: "タレ", item: "白レバー"},
{id: 12, price: 136, taste: "塩・タレ", item: "砂肝"},
{id: 13, price: 100, taste: "塩・タレ・味噌", item: "豚バラ"},
{id: 14, price: 125, taste: "タレ", item: "つくね"},
{id: 15, price: 168, taste: "塩", item: "ひな皮"},
{id: 16, price: 168, taste: "味噌", item: "ももにんにく"},
{id: 17, price: 136, taste: "塩・タレ", item: "トントロ"},
{id: 18, price: 136, taste: "タレ・味噌", item: "アスパラベーコン"},
{id: 11, price: 100, taste: "塩・味噌", item: "トマトベーコン"},
{id: 19, price: 290, taste: "タレ・味噌", item: "丸ごとシマウマ"}
]);
}
ko.applyBindings(new viewModel());
});
</script>
</head>
<body>
<h1>ifバインディングを使わずに真・偽で条件分岐：三項演算子２</h1>
塩だけとその他で分岐させてみる。
<table border="1">
<thead>
<tr>
<th></th>
<th>品名</th>
<th>味</th>
<th>料金</th>
</tr>
</thead>
<tbody data-bind="foreach: kuchiMenu">
<tr>
<td data-bind="text: (taste=='塩' ? '★' : '')"></td>
<td data-bind="text: item"></td>
<td data-bind="text: taste"></td>
<td data-bind="text: price"></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>