サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
kojs.sukobuto.com
バインディング・コンテキスト バインディング・コンテキストは、バインディングから参照できるデータをもつオブジェクトです。 バインディングの適用にあたって、Knockout は自動的にバインディング・コンテキストの階層を作成・管理します。 階層のルートは、ko.applyBindings(viewModel) に渡した viewModel です。 また、with や foreach などのフロー制御バインディングを使う度に、 ネストされた ViewModel データを参照する子コンテキストが作成されます。 バインディング・コンテキストはどのバインディングでも参照できる、次の特別な変数を提供します。 $parent 親コンテキストの ViewModel オブジェクトであり、現コンテキストの一つ外側にあたります。 ルートコンテキストでは undefined です。 <h1 data-bind="
Observable (ViewModelをつくる) Knockout は次の3つの思想に基づいています。 Observable と依存関係トラッキング 宣言型バインディング UIテンプレート ここでは上記3つのうち最初の1つを紹介しますが、その前に、MVVM パターンと View Model のコンセプトについて考えてみましょう。 MVVM と View Model Model-View-ViewModel (MVVM) はユーザインターフェイスを構築するための設計パターンであり、概念モデルです。 MVVM では、プログラムを次の3つに分割して設計することで、機能的なUIのコードをシンプルに保ちます。 Model: いかなるUIにも依存しない、ビジネスドメインのデータと操作を表すオブジェクトです。 Knockout を使う場合、サーバに保管されたデータを取得・変更するために、サーバサイ
Knockoutの機能とメリット Knockout は リッチでレスポンシブなUIデザインの開発を助け、比較的大規模な開発であっても簡潔なデータモデルを保つことができる JavaScript ライブラリです。 ユーザの操作による状況の変化や、外部データソースの変更などにより動的に変更されるUIを作る際に、Knockout はよりシンプルかつ保守しやすいように実装する手助けとなります。 主な特徴: エレガントな依存トラッキング - データモデルが変更される度に、UIの関連付けられた部分を更新します。 宣言型 バインディング - データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な動的UIも、バインディング・コンテキストを階層化させることで簡単に作成できます。 拡張が容易 - 新たなバインディングの仕組みを実装することも、最小限のコード量で実現できます。 その他のメリッ
"foreach" バインディング 用途 foreach バインディングは配列の各要素のためのマークアップセクションを繰り返し生成し、 それぞれのマークアップのコピーに対し、対応する配列要素をバインドします。 主にリストやテーブルをレンダリングする際に使用します。 配列が Observable Array である場合、 要素を追加・削除・並べ替えすると、このバインディングは効率良く UI を更新します。 具体的には、他の DOM エレメントに影響を与えることなくマークアップのコピーを挿入・削除、 または既存の DOM エレメントを並べ替えるようになっています。 この仕組みは、配列が変更されたときに foreach の出力を全てやり直すよりはるかに高速です。 もちろん、foreach バインディングをいくつでも入れ子にすることができますし、 if や with のような別のフロー制御バインデ
TypeScript + Knockout ES5 でさらにシンプルに 以前の Twitter を使った DEMO が動かなくなっていたことと、TypeScript が正式リリースされたこともあり 本記事はリニューアルいたしました。 過去のサンプルをご覧になりたい方は こちら をご参照ください。 TypeScript という言語のサンプルをご用意しました。 TypeScript は CoffeeScript などと同様に JavaScript へコンパイルするタイプの言語 (altJS と総称される) で、C# に近いオブジェクト指向表現が特徴です。 ここでは TypeScript と Knockout ES5 の力を借りて グリッドエディタ を書きなおしてみます。 TypeScript での開発の始め方については TypeScript クイックガイド がわかりやすいです。 ViewMod
Demo & Tips Knockout を使ってインタラクティブな UI を作成する例を紹介します。左のメニューから選択してください。 Knockout 入門者の方は、まず Hello world と本家サイトにある インタラクティブ・チュートリアル から始めることをおすすめします。
Knockoutのコンセプト 宣言型バインディング UIに必要なのは ViewModel (シンプルなモデルオブジェクト) とデータバインドだけ。 ややこしいDOM操作なしで、動的なインターフェイスを作ることができます。 UIの自動更新 ViewModel のプロパティが変更されると、自動的にUIの関連付けられた部分を更新します。 依存関係のトラッキング データの結合や変換を実現するためのデータ間の関係チェーンを暗黙的に設定します。 UIテンプレート 幾重にもネストされたテンプレートも、バインドされた ViewModel を用いて 素早くUIを生成します。
このページを最初にブックマークしてみませんか?
『ドキュメントKnockout.js』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く