ノックアウト（ウェブフレームワーク）

Knockout は、テンプレートを使用したModel-View-ViewModelパターンのスタンドアロンJavaScript実装です。したがって、基本原則は次のとおりです。

• ドメインデータ、ビューコンポーネント、表示されるデータを明確に分離する
• ビューコンポーネント間の関係を管理するための明確に定義された特殊なコード層の存在

後者は、JavaScript 言語のネイティブ イベント管理機能を活用します。

これらの機能により、ビュー コンポーネント間の複雑な関係の仕様が合理化および簡素化され、表示の応答性が向上し、ユーザー エクスペリエンスが向上します。

Knockout は、 Steve Sanderson によって オープンソースプロジェクトとして開発され、維持されています。

Knockout には次の機能が含まれます。

• 宣言的バインディング
• 自動 UI 更新 (データ モデルの状態が変化すると、UI が自動的に更新されます)
• 依存関係の追跡テンプレート（専用のテンプレート エンジンが含まれていますが、他のテンプレート エンジンも使用できます）

1. この例では、2 つのテキスト ボックスがデータ モデル上の観測可能な変数にバインドされています。「フル ネーム」表示は従属観測可能変数にバインドされており、その値は観測可能変数に基づいて計算されます。いずれかのテキスト ボックスを編集すると、「フル ネーム」表示は明示的なイベント処理なしで自動的に更新されます。

関数ViewModel () { this . firstName = ko . observable ( "" ); this . lastName = ko . observable ( "" );  
      
      

    this.fullName = ko.computed ( function ( ) { return this.firstName ( ) + " " + this.lastName ( ) ; } , this ) ; }​  
                 
        


こ。applyBindings ( new ViewModel ()); 

2. KnockoutJS でカスタムバインディングハンドラーを作成する

ko.bindingHandlers オブジェクトを使用して、カスタム バインディングの名前を指定し、カスタム バインディング ハンドラーを作成するときに init 関数または update 関数を作成します。init 関数は、バインディングが要素に適用されたときに呼び出され、1 回限りの初期化に最適です。バインドされた監視対象が変更されるたびに、変更されたデータに対応できる update 関数が呼び出されます。

以下は、jQuery UI 日付ピッカーを入力要素に適用するカスタム バインディング ハンドラーの簡単な例です。

ko.bindingHandlers.datepicker = { init : function ( element , valueAccessor ) { $ ( element ) .datepicker ({ onSelect : function ( date ) { var observable = valueAccessor ( ) ; observable ( date ) ; } }); }, update : function ( element , valueAccessor ) { var value = ko.unwrap ( valueAccessor ( ) ) ; $ ( element ) .datepicker ( "setDate" , value ); } } ;  
       
        
              
                   
                
            
        
    
       
           
         
    

• Papa, John (2012 年 2 月)。「Knockout を使い始める」。MSDNマガジン。2012年3 月 9 日に閲覧。
• Papa, John (2012 年 3 月)。「Knockout の HTML および JavaScript 用組み込みバインディング」。MSDNマガジン。2012年3 月 9 日閲覧。

• 「Knockoutjs をマスターする: 動的 Web アプリのための包括的なガイド」。2024 年 2 月。2024 年2 月 26 日に閲覧。

• 公式サイト