Contenu connexe
Similaire à Knockout.js を利用したインタラクティブ web アプリケーション開発 (20)
Plus de Daizen Ikehara (20)
Knockout.js を利用したインタラクティブ web アプリケーション開発
- 6. そもそものセッションの動機
• もともと XAML が好きだった
–いちおう XAML 系の MVP
• 仕事柄 jQuery 対応コンポーネントについても
理解を深めないといけない
• JavaScript でバインディングときいて
• “コントロール” に関係のあるセッションをしたい
- 10. ライブラリの参照
<head>
<script type='text/javascript' src='knockout-3.1.0.js'></script>
</head>
js ファイルの参照
<head>
<!-- 次のうちいずれか -->
<!-- Microsoft CDN knockout.js version 3.0.0 -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" ></script>
<!– CDNJS knockout.js version 3.1.0 -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
</head>
CDN の利用
- 13. 宣言型バインディング
var person = {
lastName: ‘池原’,
firstName: ‘大然’,
photo: ‘/Images/Daizen2011.png’
};
HTML
姓:
<input id="lastName" data-bind="value: lastName" />
<br />
名:
<input id="firstName" data-bind="value: firstName" />
<br />
<img style="height:300px; width:400px" data-bind="attr: { src: photo }" />
<br />
<label id="fullName" data-bind="text: '氏名: ' + lastName + firstName"></label>
html にデータの値を宣言できる
この例では value, attr, text バインディングを使用
バインディングを実行
ko.applyBindings(person);
- 15. 自動 UI 更新
var person = {
lastName: ko.observable(‘池原’),
firstName: ko.observable(‘大然’),
photo: ko.observable(‘/Images/Daizen2011.png’)
};
HTML
双方向での値のやり取り
が可能
データ更新 → UI 更新
UI 更新 → データ更新
- 16. Observable / ObservableArray
• ko.observable
– シングル プロパティ用
• 宣言: propertyName = ko.observable(初期値)
• Read: propertyName()
• Write: propertyName(新しい値)
• ko.observableArray
– 配列用
• 宣言: arrayName = ko.observableArray(配列)
• Read: arrayName()[0]
• Add/Remove: arrayName.push (), arrayName.remove()
- 17. 依存関係のトラッキング
var viewModel = {
lastName: ko.observable(‘池原’),
firstName: ko.observable(‘大然’),
photo: ko.observable(‘/Images/Daizen2011.png’)
};
viewModel.fullName = ko.computed(function () {
return viewModel.lastName() + ' ' + viewModel.firstName();
}, viewModel);
fullName は lastName と firstName に依存しており、
どちらかが変更されると自身の値も更新される。
- 18. テンプレート機能
• 指定した DOM要素を追加、特に繰り返しの処理などに有用
</head>
<!-- テンプレート -->
<script type="text/html" id="person-template">
<tr>
<td><span data-bind="text: lastName"></span></td>
<td><span data-bind="text: firstName"></span></td>
<td><img style="width: 200px; height:100px" data-bind="attr: { src: photo}" /></td>
</tr>
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>氏</th>
<th>名</th>
<th>画像</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'person-template', foreach: people}" >
</tbody>
</table>
</body>
- 24. 構文
ko.bindingHandlers.jQUIprogressBar = {
init: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// バインディングの初期化処理
// progressBar は 1 方向(データ → UI ) で完結するのでシンプル
},
update: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// バインディングの初期化時および値の変更時に行う処理
}
};
- 25. パラメーター
• element
– バインディングの対象となる DOM 要素
• valueAccessor
– バインディングに使用される値を呼び出すことができる JavaScript 関数。
ko.unwrap を利用することで observable、非 observable の値を取得できる
• allBindings
– バインディング対象にバインドされているすべての値
• allBindings.get(名前)で値の取得(存在しない場合は undefined)、allBindings.has(名
前) で存在の確認
• viewModel
– 3.0 から廃止、代替手段として bindingContext.$data または bindingContext.$rawData を
利用する
• bindingContext
– このバインディングにおいてアクセスできる bindingContext
- 27. 初期化の例
ko.bindingHandlers.jQUIprogressBar = {
init: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// progressBar は 1 方向(データ → UI ) で完結するのでシンプル
// プログレスバー
var pbar = element;
// バインドされた値
var progressValue = ko.unwrap(valueAccessor());
// ここでプログレスバーを初期化、View 側のコードでは呼び出さない
$(pbar).progressbar({ value: progressValue});
},
};
- 28. 値の変更時の例
ko.bindingHandlers.jQUIprogressBar = {
update: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// プログレスバー
var pbar = element;
// 更新された値
var progressValue = ko.unwrap(valueAccessor());
// 更新を反映
$(pbar).progressbar("option", "value", progressValue);
}
};
- 29. 考えられるシナリオ(1)
• 複数の値を渡したい場合は?
– progressBar に value と max を渡したい
<div id="progress" style="width:300px"
data-bind="jQUIprogressBar2:
{ value: progressValue, max: maxValue}">
</div>
propgressbar の初期化値と
同じ形式にしておく
- 30. 考えられるシナリオ(2)
• バインディングが 2 方向に渡る場合は?
– 例: jQuery UI Slider の value は
2 方向で利用される可能性がある
– Slider の値変更イベントを extension 側で制御
<div id="slider" style="width:300px"
data-bind="jQuerySliderValue: progressValue"></div>
- 32. 初期化の例
ko.bindingHandlers.jQUIprogressBar2 = {
init: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// プログレスバー
var pbar = element;
// バインドされた値
var options = ko.unwrap(valueAccessor());
// 値の取得を試行
var max = ko.unwrap(options.max);
if (max !== undefined) {
options.max = max;
}
// 値の取得を試行
var value = ko.unwrap(options.value);
if (value !== undefined)
{
options.value = value;
}
// ここでプログレスバーを option 付きで初期化 例: { value: 10, max: 100} というような形式になる
$(pbar).progressbar(options);
},
};
- 33. 値の変更時の例
ko.bindingHandlers.jQUIprogressBar2 = {
update: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
//// プログレスバー
var pbar = element;
// バインドされた値
var options = ko.unwrap(valueAccessor());
// 値の取得を試行
var max = ko.unwrap(options.max);
if (max !== undefined) {
$(pbar).progressbar("option", "max", max);
}
// 値の取得を試行
var value = ko.unwrap(options.value);
if (value !== undefined) {
$(pbar).progressbar("option", "value", value);
}
}
};
- 34. 2 方向のサポートの実装例
ko.bindingHandlers.jQuerySliderValue = {
init: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
// Slider
var slider = element;
// バインドされた値
var value = ko.unwrap(valueAccessor());
if (value !== undefined) {
// ここでプログレスバーを初期化
$(slider).slider({
value: value,
change: function (event, el) {
if (value != el.value) {
// 値をバインディングソースに書き戻す
valueAccessor()(parseInt(el.value));
}
}
});
}
},
update: function (
element, valueAccessor, allBindings, viewModel, bindingContext) {
var el = $(element);
var value = ko.utils.unwrapObservable(valueAccessor()());
if (value !== el.val()) {
el.slider("value", value);
}
}
};
- 37. 収録コンポーネント:一覧
• データ グリッド
– Grid
– Hierarchical Grid
• OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid
• データ ビジュアリゼーション
– Data Chart
– Bullet Graph
– Pie Chart
– Linear Gauge
– Doughnut Chart
– Map
– Funnel Chart
– Barcode
– Radial Gauge
– Zoombar
– Sparkline
• レイアウト
– Layout Manager
– Tile Manager
– Splitter
• エディター
– Combo Box
– Editors
– Date Picker
– HTML Editor
• フレームワーク
– Infragistics Loader
– Data Source
– Templating Engine
– Infragistics Excel*
– Infragistics Word*
– Infragistics Document*
• 操作
– Tree
– Popover
– Dialog Window
– Rating
– File Upload
– Video Player
• モバイル
– List View
– Rating
– Button
– Check Box
– Check Box Group
– Collapsible
– Collapsible Set
– RadioButton Group
– SelectMenu
– Slider
– Toggle Switch
– TextBox
– Page
– PageContent
– PageFooter
– PageHeader
– Popup
– Link
– NavBar
*ASP.NET 用サーバー側コンポーネント
• jQuery ベース
• jQuery UI ベース
• jQuery Mobile ベース
併せて ASP.NET MVC 用ラッパークラスも提供