cf. knockout.js

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

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /KnockoutExam/knockoutEx6_with.html


ソースコード

基本的に見ればわかるでしょ。HTML 中の $index や $parent については HTML KnockoutJS data-bind4 Context を参照

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex6</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/knockoutEx6_init.js"></script>
  </head>
  <body>
    First name: <input data-bind="value: firstName"/> <br/>
    Last name : <input data-bind="value: lastName"/> <br/>
    Id : <input data-bind="value: id"/> <br/>
    Dept : <input data-bind="value: dept"/> <br/>
    <button data-bind="click: addPerson, disable: disableAddPerson">Add</button>
	<table>
		<thead>
			<tr>
				<th></th>
				<th>ID</th>
				<th>First name</a></th>
				<th>Last name</a></th>
				<th>Dept</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>
				<!-- ko with : work -->
				<td data-bind="text: id"></td>
				<td data-bind="text: $parent.firstName"></td>
				<td data-bind="text: $parent.lastName"></td>
				<td data-bind="text: dept"></td>
				<!-- /ko -->
				<td><button data-bind="click: $parent.removePerson">delete</button></td>
			</tr>
		</tbody>
	</table>  
  </body>
</html>

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

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutEx6_vmodel', 'domReady!'],
  function(ko, vmdl) {
    ko.applyBindings(new vmdl());
  }
);

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx6_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.id = new ko.observable("");
		self.dept = new ko.observable("");
	    self.disableAddPerson = ko.computed(function() {
	    	return '' === self.firstName() || '' === self.lastName() || '' === self.id() || '' === self.dept();
	    });		
		
		self.people = new ko.observableArray([
			{ firstName: 'Bert', lastName: 'Bertington' , work : {id : 9743823, dept : 'Account'}},
			{ firstName: 'Denise', lastName: 'Dentiste' , work : {id : 4930225, dept : 'Sales'}},
			{ firstName: 'Charles', lastName: 'Charlesforth' , work : {id : 9922334, dept : 'Robotech'}}
		]);
		
		self.addPerson = function() {
			var person = new Object();
			person.firstName = self.firstName();
			person.lastName = self.lastName();
			person.work = new Object();
			person.work.id = self.id();
			person.work.dept = self.dept();
			
			self.firstName("");
			self.lastName("");
			self.id("");
			self.dept("");
			
			self.people.push(person)
		}
		
		self.removePerson = function(person) {
			self.people.remove(person);
		}
	};
});


HTML#Knockout


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-03-07 (土) 21:43:34 (3571d)
Short-URL: http://at-sushi.com/pukiwiki/pukiwiki.php?cmd=s&k=841732b726
ISBN10
ISBN13
9784061426061