HTML KnockoutJS data-bind5 Template

2023-02-092023
10.7% (39.3/365)
February
29.7% (8.3/28)
Week 06
47.4% (3.3/7)
Day 09 Thu
31.9% (7.6/24)

訪問者

total: 5894
today: 2
yesterday: 3
now: 12

↑

更新

MenuBar

これは何?
サンプルアプリケーション
ソースコード

cf. knockout.js

これは何? †

一つの HTML 内で複数回登場するセンテンスを
```
<script type="text/html" id="name-template">
  ... sentence ...
</script>
```
のようにテンプレート化する

body からは

<tbody data-bind="template : {name : 'name-template', foreach: people}">

というように指定してテンプレートを呼び出す

name : template id
data : テンプレートで描画するオブジェクト
if : テンプレートを展開するかのフラグ
foreach : 配列を foreach で描画する

as : foreach で展開されるオブジェクトに別名を定義する。テンプレートを入れ子にした時に、親ループのオブジェクトを参照するため。$parent でも同じことができる

<ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul>

<script type="text/html" id="seasonTemplate">
    <li>
        <strong data-bind="text: name"></strong>
        <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
    </li>
</script>

<script type="text/html" id="monthTemplate">
    <li>
        <span data-bind="text: month"></span>
        is in
        <span data-bind="text: season.name"></span>
    </li>
</script>

<script>
    var viewModel = {
        seasons: ko.observableArray([
            { name: 'Spring', months: [ 'March', 'April', 'May' ] },
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
        ])
    };
    ko.applyBindings(viewModel);
</script>

afterRender, afterAdd, beforeRemove : テンプレートが展開される時の call back

留意点 : <script type="text/html" src="template/name-template.html"> というように、外部ファイルのテンプレートを呼び出すことはできない (knockout.js ではなく HTML の制約)
⇒ そういうことがやりたければ、独自の UI コンポーネント化する → HTML KnockoutJS data-bind7 Original Component

↑

サンプルアプリケーション †

↑

ソースコード †

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx7_template.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex7</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/html" id="name-template">
		<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>
    </script>
    <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&#8645;</a></th>
				<th><a data-bind="click: sortByLastName">Last name&#8645;</a></th>
				<th></th>
			</tr>
		</thead>
		<tbody data-bind="template : {name : 'name-template', foreach: people}">
		</tbody>
	</table>  
  </body>
</html>

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx5_init.js

/*
 * アプリケーションのイニシャライザ.
 */
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());
  }
);

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx5_vmodel.js

/*
 * アプリケーションの 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);
		}
	};
});

HTML#Knockout