このトピックは、Knockout ライブラリを使用して View-Model のオブジェクトをバインドするために Ignite UI for jQuery エディター コントロールを構成する方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックと外部リソースの一覧です。
トピック
igTextEditor の概要: このトピックは、igTextEditor コントロールを紹介し、基本的なインスタンス化の例を示します。
igNumericEditor の概要: このトピックは、igNumericEditor™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igDateEditor の概要: このトピックは、igDateEditor™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igCurrencyEditor の概要: このトピックは、igCurrencyEditor コントロールを紹介し、基本的なインスタンス化の例を示します。
igPercentEditor の概要: このトピックは、igPercentEditor™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igMaskEditor の概要: このトピックは、igMaskEditor™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igCheckboxEditor の概要: このトピックは、igCheckboxEditor™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igDatePicker Oの概要: このトピックは、igDatePicker™ コントロールを紹介し、基本的なインスタンス化の例を示します。
igTimePicker の概要: このトピックは、igTimePicker™ コントロールを紹介し、基本的なインスタンス化の例を示します。
外部リソース
このトピックは、以下のセクションで構成されます。
Ignite UI for jQuery エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して Ignite UI for jQuery エディターを初期化し構成するための簡単な手段を提供することを目的としています。
Knockout のサポートは、View-Model への外部更新が発生した場合に、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能としてページの存続期間中に実装されます。また、ビジネスに適したdata-bind 属性に関連するいずれかのエディター コントロール オプションを指定できます。
以下の表に、このトピックで使用するコード例を示します。
igMaskEditor™ を View-Model オブジェクトにバインドする方法を示します。igPercentEditor™ を View-Model オブジェクトにバインドする方法を示します。igTextEditor コントロールをインスタンス化し、各キー ストロークを更新する方法を示します。この例は、Knockout により管理される View-Model オブジェクトに Ignite UI for jQuery エディター コントロールの値オプションをバインドする方法を示します。igTextEditor、igNumericEditor、igCurrencyEditor および igDateEditor のコントロールのコンテキストで示されます。Knockout の宣言構文を使用して、コントロールが入力要素のデータ バインド属性からインスタンス化され View-Model 監視可能プロパティにバインドされます。
以下のコード スニペットは、Knockout により管理される監視可能プロパティを宣言する View-Model オブジェクトを示します。
JavaScript の場合:
var viewModel = {
orderDate: ko.observable(new Date(2017, 0, 21)),
dueInDays: ko.observable(7),
customerName: ko.observable("Peter Sanders"),
contactPhone: ko.observable("(318) 555-6879"),
advancePayment: ko.observable(516.89),
discountPercent: ko.observable(8)
};
以下のコード スニペットは、宣言されたKnockout バインディングをページに適用する方法を示します。ko.applyBindings() 呼び出しは、Loader の即時コールバック中に実行される点に注意してください。これは、Knockout の Ignite UI for jQuery エディター拡張機能が、バインディングの適用前にページにロードされる必要があるためです。
JavaScript の場合:
$.ig.loader({
scriptPath: "http://localhost/ig_ui/js/",
cssPath: "http://localhost/ig_ui/css/",
resources: "igEditors,extensions/infragistics.ui.editors.knockout-extensions.js",
ready: function () {
ko.applyBindings(viewModel);
}
});
以下のコード スニペットは、ビュー内でエディター コントロールのバインディング オプションを宣言する方法を示します。最も重要なのは、対応する input 要素の data-bind 属性におけるインスタンス化オプションの宣言部分です。
HTML の場合:
<!-- date editor -->
<input data-bind="igDateEditor: { value: orderDate }"/>
<!-- numeric editor -->
<input data-bind="igNumericEditor: { value: dueInDays }"/>
<!-- text editor -->
<input data-bind="igTextEditor: { value: customerName }"/>
<!-- currency editor -->
<input data-bind="igCurrencyEditor: { value: advancePayment }"/>
igMaskEditor)この例は、Knockout により管理される View-Model オブジェクトに igMaskEditor コントロールをバインドする方法を示します。Knockout の宣言構文を使用して、input 要素の data-bind 属性から igMaskEditor をインスタンス化し View-Model 監視可能プロパティにバインドします。エディターの inputMask オプションはその他に、特定のパターンに従ってユーザー入力を制限するに構成されます。
以下のコード スニペットは、igMaskEditor コントロールをインスタンス化します。コントロールは、View-Model オブジェクトの contactPhone 監視可能プロパティにバインドされます。また、マスクの inputMask に加えて、エディターは電話番号を示すマスクに設定されます。
HTML の場合:
<!-- mask editor -->
<input id="contactPhoneIG" class="row-control" data-bind="igMaskEditor: {
value: contactPhone,
inputMask: '(000) 000-0000'
}"/>
igPercentEditor)この例は、Knockout により管理される View-Model オブジェクトに igPercentEditor コントロールをバインドする方法を示します。Knockout の宣言構文を使用して、igPercentEditor は入力要素のデータ バインドからインスタンス化され View-Model 監視可能プロパティにバインドされます。エディターの displayFactor オプションはその他に、基本の View-Model 値を適切なパーセンテージ入力まで拡大縮小するように構成されます。
以下のコード スニペットは、igPercentEditor コントロールをインスタンス化します。コントロールは、View-Model オブジェクトの discountPercent 監視可能プロパティにバインドされます。さらに、discountPercent で数値を適切に拡大縮小するため、エディターの displayFactor オプションを 1 に設定します。
HTML の場合:
<!-- percent editor -->
<input id="discountPercentIG" class="row-control" data-bind="igPercentEditor: {
value: discountPercent,
displayFactor : 1
}"/>
このサンプルは、Knockout データ バインディングにより管理されるデータに Ignite UI for jQuery Editor コントロールをバインドする方法を紹介します。
igTextEditor)この例は、Ignite UI for jQuery エディター コントロールの値オプションをKnockout により管理される View-Model にバインドし、各キーストロークで View-Model を更新するようコントロールを構成する方法を示します。デフォルトでは、Ignite UI for jQuery コントロール内の編集は、コントロールがフォーカスを失った場合、たとえば onBlur が発生した場合などに View-Model に送られます。以下のコードは、updateMode オプションを immediate に設定することにより、igTextEditor コントロールの更新モードをイミディエイトに構成します。
以下のコードはこの例を実装します。
HTML の場合:
<div data-bind="igTextEditor: {
value: customerName,
updateMode: 'immediate'
}"></div>
注: 更新モード オプションは、初期化の時のみに構成できます。実行時は変更できません。
開発者が Knockout の disabled バインディング ハンドラーを適用したい場合、これが自動的にエディターを有効/無効にしません。エディターにコントロールの有効化/無効化を処理する特別なロジックがあります。そのため、追加の igEditorDisable バインディング ハンドラーが作成されます。以下のコードは、igEditorDisable バインディングを宣言する方法を示します。
JavaScript の場合:
function viewModel() {
this.isDisabled = ko.observable(false);
}
HTML の場合:
<div data-bind="igTextEditor: { ...}, igEditorDisable: isDisabled"></div>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igCombo™ コントロールを構成する方法について説明します。以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。
オンラインで表示: GitHub