KnockoutJS-カスタムバインディング属性

　　knockoutjsでは、既存の結合機能は、基本的にはまだknockoutJSは、カスタムバインディングを提供し、完了する必要があり、このシーンの顔、しかし、シーンには例外があり、拡張されたアカウントに移動する必要はありません、非常に強いてきましたバインディングを拡張します。

 

まず、新しいバインドを作成します

　　JSファイルは、与えられたフォーマットは、バインディングに合わせて拡張することがko.bindingHandlers.xxx、新しいバインディング機能を作成しようとします。

ko.bindingHandlers。yourBindingName = { 
    INIT：機能（要素、valueAccessor、allBindingsAccessor、ビューモデル）{
         //は結合が第一要素に適用されるときに呼び出されます
        // 任意の初期状態を設定し、イベントハンドラなどここ
    }、

    更新：関数（要素、valueAccessor、allBindingsAccessor、ViewModelには）{
         // 結合が最初に、素子に印加されたときに一度呼び出される
        // たびに関連付けられた観察変更値再び。
        // ここで指定された値に基づいてDOM要素を更新します。
    } 
}。

 　　第二に、結合は、同じ使用来ると結合した、HTMLで完了することができます。

< divのデータバインド= " yourBindingName：someValueの" >  </ DIV >

　　これは、カスタムバインディングでは、ことに留意しなければならないのinitおよびアップデートの方法は、すべての定義に限らない、あなたはそれらを1つだけ定義することができます。

　　knockoutjsに配置されたJSファイルの最後に、導入、

<スクリプトSRC = "〜/ libに/ノックアウト/ノックアウト-3.5.0.js"> </ SCRIPT> 
<スクリプトSRC = "〜/ JS / custombindings.js" ASP-APPENDバージョン= "真の"> </スクリプト>

 

第二に、分析機能更新

　　変化がモニター・エレメント変更を結合または関連リスニング要素を発生した場合、ノックアウトは、コールバック関数を更新する限り、関連する要素の変更が聴取として、直ちにいくつかのパラメータは、コールバック関数の更新に渡され、コールバック関数を更新しますインチ

• 要素：DOM要素の結合

• valueAccessor：JavaScript関数は、あなたがパラメータを渡す必要はありませんvalueAccessor（）を使用して、）（valueAccessorを通じてモデルのアプリケーションの結合、その後、（ko.unwrap呼び出すことによって）とvalueAccessorを渡すには、プロパティの現在の値を取得することができます（）を取得します属性値が実際の値を得ることができます。

• allBindings：JavaScriptのオブジェクト、およびこの属性が存在しない場合、このオブジェクトに拘束されるすべてのプロパティ値は、allBindings.get（「属性名」）で要素に基づいて指定された属性名の値を取得するためにDOM要素にアクセスすることができ、リターン未定義、またはallBindings.has（「属性名」）で属性がDOM要素上に存在する判別します。

• BindingContextを：現在のバインディング要素のコンテキスト、あなたは兄弟は（非常に強力）のコンテキスト内の属性、バインディングコンテキストおよび親のコンテキスト内で結合文脈によって、現在のバインディングのコンテキスト内のプロパティにアクセスすることができます。

　　たとえば、あなたは目に見える結合することによって、要素の可視性を制御したいかもしれませんが、あなたは時間を隠したり表示するに要素をアニメーション化します。そして、あなたはjQueryのslideUp / slideDown関数を呼び出すために、独自のバインディングをカスタマイズすることができます。

= ko.bindingHandlers.slideVisible { 
    更新：機能（要素、valueAccessor、allBindings）{
         // プロパティが値を取得
        するvar =値をvalueAccessor（）; 
 
        // 現在のプロパティ値を取得
        VAR valueUnwrapped = ko.unwrap（値）; 
 
        // 現在のバインディングコンテキスト他のコンテキストを取得した値属性
        のvar DURATION = allBindings.get（ 'slideDuration'）|| 400; // 400msの期間がない限り、指定されたデフォルト
 
        // DOM要素を操作
        IF（== valueUnwrapped trueに）
            $（要素）。 slideDown（DURATION）; // 要素見えるのメイク
        他
            $（要素）.slideUp（デュレーション）。   // 要素を不可視
    } 
};

 　　ページには、私は、カスタムファイルjsのブロックテンプレートページに導入されていたであろう、ここでのフォーマットに従って直接結合完了します。

<divのデータバインド= "slideVisible：giftWrap、slideDuration：600">あなたは</ div>のオプションを選択した
の<label> < "にチェック：giftWrapを" =入力タイプ= "チェックボックス"データバインド/>ギフトラップ</ラベル> 

@sectionスクリプト{
     <スクリプトタイプ= "テキスト/ javascriptの">
         VARビューモデル= { 
            giftWrap：ko.observable（真）
        }。

        $（関数（）{ 
            ko.applyBindings（ビューモデル）; // 完成绑定
        }）。
    </ SCRIPT> 
}

 　　効果は、バインディングは、コードの再利用を実現するために、さまざまな場所で行うことができ、結合の定義から見ることができます。　　

　　

第三に、分析関数init

　　DOM要素に自己定義されているバインディングの呼び出しをあなたのinit関数を使用する場合にノックアウト、init関数は、主に2つの目的があります。

• DOM要素の初期値を設定します

• そのような時にユーザーがクリックまたはDOM要素を編集し、あなたは関連する観察値の状態を変更することができるとして登録イベントハンドラ、。

　　init関数は、ユーザが将来的にアニメーションを変更することを可能にするために、上記の例に従って、変換を同一のパラメータおよび更新機能を受信し、ページが最初に表示される（しかし、任意のアニメーション効果を使用しない）場合slideVisible要素の状態を設定させその後、時間と実行。

= ko.bindingHandlers.slideVisible { 
    INIT：機能（要素valueAccessor）{
         VARの値= ko.unwrap（valueAccessor（））; 
        $（要素）.toggle（値）; 
    } 
    更新：機能（要素、valueAccessor、allBindings） {
         // プロパティ値を取得
        するvar値を= valueAccessor（）; 

        // 現在のプロパティを取得値
        VAR valueUnwrapped = ko.unwrap（値）; 

        // 他のコンテキストが現在のバインディングのコンテキストから取得した値属性
        のvar "DURATION = allBindings.getを（ slideDuration「）|| 400; // 400msのDURATIONは、特記のない限り、デフォルトIS 

        //操控DOM元素
        であれば（valueUnwrapped == 真）
            $（要素）.slideDown（デュレーション）。// 要素を可視作る
        他の
            $（要素）.slideUp（デュレーション）。   // 要素を不可視
    } 
};

 　　ページは、対応する直接本部が隠されて見え始めるだろう、と選択しクリックした後に表示されるとき、giftWrapのデフォルトのViewModelはfalseです設定してください。

VaRのビューモデル= { 
    giftWrap：ko.observable（真）
}。

 　　

第四に、修正DOMイベントリスナー値

　　観測可能な値の変更はDOM要素を更新するときに我々は、更新コールバックの使用をマスターしています。しかし今度は、ユーザが関連する観察値を更新するために、DOM要素に何かをするとき、例えば、シーンです。これは、関連する観察値を変更するには、イベントハンドラのコールバックのinitを使用して登録することができます。

ko.bindingHandlers.hasFocus = { 
    INIT：機能（要素、valueAccessor）{ 
        $（要素）.focus（関数（）{
             VARの値= valueAccessor（）; 
            値（真）; 
        }）; 
        $（要素）.blur（関数（）{
             VARの値= valueAccessor（）; 
            値（偽）; 
        }）; 
    }、
    更新：機能（要素、valueAccessor）{
         VARの値= valueAccessor（）。
        もし（ko.unwrap（値））
            element.focus（）; 
        他
            element.blur（）; 
    } 
}。

　　例えば、ユーザは、入力ボックスの表示をクリックしたとき、出るとき隠す、および値のモニターを変更、無効化ボタンを有効に制御します。

< P >名前：< 入力データバインド= "hasFocus：editingName"  /> </ P > 

< divのデータバインド= "表示：editingName" >あなたが名前を編集している。</ divの> 
< ボタンデータバインド= "有効にします！editingName（）、クリックします。機能を（）{editingName（真）}" >の編集名</ ボタン> 

@sectionスクリプト{ 
    < スクリプトタイプ= "テキスト/ javascriptの" >
        VAR のViewModel = { 
            giftWrap：ko.observable（falseに、）
            editingName：ko.observable（）
        }; 

        $（関数（）{ 
            ko.applyBindings（ViewModelには）; // 完全な結合
        }）;
     </ スクリプト> 
}

　　次のような効果を得ることができます

　　

　　また、仮想要素にカスタムバインディングを使用することができます

<！ -  KOのmybinding：someDataが - > ... <！ -  / KO  - >

 　これは、あまり実用ものの、などの28件の原則をカスタムバインディングの道を完了しますが、限りがあるので、シーンが無駄に再生することができます。

　 コード住所：https://gitee.com/530521314/Partner.TreasureChest.git

 

2019-08-29,望技术有成后能回来看见自己的脚步