![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS data-bind2 foreach |
cf. knockout.js
基本的に見ればわかるでしょ。HTML 中の $index や $parent については HTML KnockoutJS data-bind4 Context を参照
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js Ex5</title>
<style>
table{
border-collapse: collapse;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
th{
padding: 6px;
text-align: left;
vertical-align: top;
color: #666666;
background: #eee;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
td{
padding: 6px;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
</style>
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx5_init.js"></script>
</head>
<body>
First name: <input data-bind="value: firstName"/> <br/>
Last name : <input data-bind="value: lastName"/> <br/>
<button data-bind="click: addPerson, disable: disableAddPerson">Add</button>
<table>
<thead>
<tr>
<th></th>
<th><a data-bind="click: sortByFristName">First name⇅</a></th>
<th><a data-bind="click: sortByLastName">Last name⇅</a></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<!-- foreach 節の中では this は people。view-model は $parent -->
<tr data-bind="style: {'background-color' : ( $index() % 2 === 0 ? 'azure' : 'white')}">
<td data-bind="text: $index() + 1"></td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td><button data-bind="click: $parent.removePerson">delete</button></td>
</tr>
</tbody>
</table>
</body>
</html>/*
* アプリケーションのイニシャライザ.
*/
require.config({
// Javascript の Base Url
baseUrl: 'js/lib',
// ライブラリのパスの別名を定義する
paths: {
'app': '../',
'knockout' : 'knockout-3.2.0',
},
// AMDに対応してないモジュールを読み込む
shim: {
}
});
require(['knockout', 'app/knockoutEx5_vmodel', 'domReady!'],
function(ko, vmdl) {
ko.applyBindings(new vmdl());
}
);/*
* アプリケーションの View Model.
*/
define(['knockout'], function(ko) {
return function appViewModel() {
var self = this;
self.firstName = new ko.observable("");
self.lastName = new ko.observable("");
self.disableAddPerson = ko.computed(function() {
return '' === self.firstName() || '' === self.lastName();
});
self.people = new ko.observableArray([
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Denise', lastName: 'Dentiste' },
{ firstName: 'Charles', lastName: 'Charlesforth' }
]);
self.sortByFirstNameAsc = 1;
self.sortByFristName = function() {
self.people.sort(function(o1, o2){
return o1.firstName.localeCompare(o2.firstName) * self.sortByFirstNameAsc;
});
self.sortByFirstNameAsc *= -1;
};
self.sortByLastNameAsc = 1;
self.sortByLastName = function() {
self.people.sort(function(o1, o2){
return o1.lastName.localeCompare(o2.lastName) * self.sortByLastNameAsc;
});
self.sortByLastNameAsc *= -1;
};
self.addPerson = function() {
var person = new Object();
person.firstName = self.firstName();
person.lastName = self.lastName();
self.firstName("");
self.lastName("");
self.people.push(person)
}
self.removePerson = function(person) {
self.people.remove(person);
}
};
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js Ex5</title>
<style>
table{
border-collapse: collapse;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
th{
padding: 6px;
text-align: left;
vertical-align: top;
color: #666666;
background: #eee;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
td{
padding: 6px;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
</style>
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx5_init.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th><a data-bind="click: sortByFristName">First name⇅</a></th>
<th><a data-bind="click: sortByLastName">Last name⇅</a></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input data-bind="value: firstName"/></td>
<td><input data-bind="value: lastName"/></td>
<td><button data-bind="click: addPerson, disable: disableAddPerson">Add</button></td>
</tr>
<!-- ko foreach: people -->
<tr data-bind="style: {'background-color' : ( $index() % 2 === 0 ? 'azure' : 'white')}">
<td data-bind="text: $index() + 1"></td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
<td><button data-bind="click: $parent.removePerson">delete</button></td>
</tr>
<!-- /ko -->
</tbody>
</table>
</body>
</html>
