knockout.js 表示したデータを削除

2012/04/11

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF−8">
<title>knockoutjsちゅーとりある：データを削除する</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">
$(function () {
// 表示部
function SeatReservation(name, initialMeal) {
var self = this;
// data−bindの各ラベル？に対応する値の設定
self.name = name;
self.meal = ko.observable(initialMeal);
// 「price」がfalseの時は「None」と表示させる
self.formattedPrice = ko.computed(function() {
var price = self.meal().price;
return price ? "$" + price.toFixed(2) : "None";
});
}
// ko.applyBindings()が呼ばれたときに実行される
function ReservationsViewModel() {
var self = this;
// データ
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// 最初に表示するデータ（<table>の<tbody>のdata−bindのラベル？が「seats」の中身）
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[0])
]);
// Priceの総額
self.totalSurcharge = ko.computed(function() {
var total = 0;
for (var i = 0; i < self.seats().length; i++)
{
total += self.seats()[i].meal().price;
}
return total;
});
// 「Reserve another seat」をクリックしたときpush()する
self.addSeat = function() {
self.seats.push(new SeatReservation("", self.availableMeals[0]));
}
// 「Remove」をクリックしたときremove()する
self.removeSeat = function(seat) {
self.seats.remove(seat)
}
}
ko.applyBindings(new ReservationsViewModel());
})();
</script>
</head>
<body>
<table>
<thead><tr>
<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
</tr></thead>
<tbody data−bind="foreach: seats">
<tr>
<td><input data−bind="value: name" /></td>
<td><select data−bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
<td data−bind="text: formattedPrice"></td>
<td><a href="#" data−bind="click: $root.removeSeat">Remove</a></td>
</tr>
</tbody>
</table>
<button data−bind="click: addSeat">Reserve another seat</button>
<h3 data−bind="visible: totalSurcharge() > 0">
Total surcharge: $<span data−bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
</body>
</html>

めも

82行目の「Remove」

59行目の「self.removeSeat」で「remove()」が実行されて削除される。

90行目の「visible: totalSurcharge()」

44行目で計算してくれている。

新着（ニュース関連以外）

2018-07-26

年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。

2018-05-16

PHPで画像のヘッダ情報（？）の「Orientation」を元に画像回転させたい。

2018-03-05

Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。

2018-02-23

プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。

2017-12-13

jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい

ソース

めも

82行目の「Remove」

90行目の「visible: totalSurcharge()」

新着（ニュース関連以外）

ニュース関連の新着

タグ