HTML KnockoutJS data-bind4 Context

2024-12-042024
92.5% (338.7/366)
December
12.2% (3.7/31)
Week 49
39.8% (2.7/7)
Day 04 Wed
78.9% (18.9/24)

total: 7472
today: 1
yesterday: 1
now: 1

これはなに？ †

knockout.js では、ko.applyBindings(ViewModel?) で、ViewModel? を HTML にバインドする
このとき、knockout.js は、HTML の data-bind 属性を使って、DOM の装飾やイベント処理の貼付けを行う
knockout.js は、data-bind を処理するにあたって、入れ子構造の View Model の何処を処理中であるかを管理する Stack (FILO) を持っていてる。knockout.js では、現在の処理状態を Context と呼んでいる
プログラマは data-bind の中で Context を使って簡単な処理を実装することができる。
- 繰り返し項目の項目番号が奇数の行だけ色を付けたり (行番号を２で割ったあまりが 0 なら、塗りつぶしの Style を適用)
- 受注:明細=1:n で、明細行に受注番号を出したり (明細印字ループの外側にアクセスする)

$root
- View Model 全体へのポインタ
$context
- 現在のコンテキスト、View Model への参照 $data を持つ
- foreach , with でコンテキストが一段中に入る
- $context は、View Model 全体を取り扱うコンテキスト
- $context は、people を取り扱うコンテキスト
$data
- 現在のコンテキストでの View Model への参照
- $data は、View Model 全体へのポインタ
- $data は、people へのポインタ
$parent
- 親コンテキストが取り扱っている View Model
- $parent は、View Model 全体へのポインタ
- removePerson() は、"foreach : people" のコンテキストから見ると、$parent.removePerson()
- $parent[0] = $parent
- $parent[1] 親コンテキストの親コンテキストが指し示す View Model
- $parent[2] 親コンテキストの親コンテキストの親コンテキストが指し示す View Model
$index
- foreach の中で、何番目の要素かを指し示す
$parentContext
- 親コンテキスト

$element

data-bind があるタグの DOM element

<div id="item1" data-bind="text: $element.id"></div>