新しいコンボへの移行

トピックの概要

このトピックは、古いコンボから新しいコンボへの移行を支援することを目的としています。以前に行っていたシナリオと現在行うことのできるシナリオを示します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

1. 一般的な変更点
2. オプションの変更点
3. 新しいオプション
4. API メソッドの変更点
5. 新しい API メソッド
6. テーマの変更
7. イベントの変更点
8. 新しいイベント
9. Knockout 統合の変更点
10. Knockout の後方互換性
11. 要件

一般的な変更点

オプションの変更点

新しいオプション

すべてのオプションを参照

API メソッドの変更点

新しい API メソッド

すべての API メソッドを参照

テーマの変更

<style>
      input#combo::-webkit-input-placeholder {
        color: red;
      }
</style>

注: ブラウザーに基づいて (:-moz-placeholder, :-ms-input-placeholder); を使用します。

イベントの変更点

新しいイベント

すべてのイベントを参照

Knockout 統合の変更点

コンボをリストからのみ値を受け入れるコントロールと考えることが、新しい igCombo コントロールに導入された変更点の 1 つです。igCombo にはカスタム値を許可するオプションはありません。以前は、Knockout 拡張機能での異なる作業プロセスのためにカスタム値が必要でした。すなわち、igCombo が変更について View-Model に通知できるのは、項目が選択 / 選択解除されるとき、および選択された項目コレクションが変更されるときのみです。したがって、古い Knockout 拡張オプションの一部が必要なくなり、必要ないくつかのオプションが導入されました。igCombo を Knockout 拡張機能と統合するために、以下の変更が行われました。

新しいオプション

削除されたオプション

前

<script type="text/javascript">
var model = [
    { name: "Adam Sandler", id: "nm0001191" },
    { name: "Brooke Shields", id: "nm0000222" },
    { name: "Charles Chaplin", id: "nm0000122" },
];
var viewModel = new ViewModel(model);
 function ViewModel(actorsList) {
    this.selectedActor = ko.observable(actorsList[0].name);
 }
</script>
<span id="comboActors" data-bind="igCombo: {
    text: selectedActor,
    textKey: 'name',
    valueKey: 'id'
}"></span>

現在

<script type="text/javascript">
var model = [
    { name: "Adam Sandler", id: "nm0001191" },
    { name: "Brooke Shields", id: "nm0000222" },
    { name: "Charles Chaplin", id: "nm0000122" },
];
var viewModel = new ViewModel(model);
 function ViewModel(actorsList) {
    this.selectedActor = ko.observable(actorsList[0].name);
    this.selectedActorNew = ko.observableArray([actorsList[0].id]);
    this.selectionChanged = function(e, args) {
        this.selectedActor(args.items[0].data.name);
    }
 }
</script>
<span id="comboActors" data-bind="igCombo: {
    selectedItems: selectedActorNew,
    textKey: 'name',
    valueKey: 'id',
    selectionChanged: selectionChanged
}"></span>

注: これは、igCombo から View-Model への変更がある場合のみ機能します。

Knockout の後方互換性

新しいコンボおよびその Knockout 拡張子が更新されているため、アーキテクチャも変更されました。コンボの選択コレクションがドロップダウンの項目に利用可能な値のみを許可するためにデザインされました。Knockout 拡張子はそのパターンを使用し、コンボの変更をモニターする監視可能な項目は選択された項目の配列です。 以前のバージョンで拡張子がコンボ フィールドをモニターしました。新しい実装では、単一の選択だけでなく、複数の選択された項目をモニターできます。

この方法で、監視可能な入力要素が監視可能配列として定義できないため、igCombo を HTML 入力要素にバインドできません。一方、igEditors およびその拡張子が、HTML 入力要素と動作するようデザインされています。igCombo を HTML 入力要素と結合するには、以前のセクション (Knockout 結合の変更) に説明した実装を使用できます。 このセクションのコードはカスタム解決を紹介します。ViewModel および View のコードに変更せずに新しい igCombo および Knockout 拡張子を使用できます。このポリフィルは、Ignite UI for jQuery の最新バージョンにアップグレードしますが、現在のコードを選択通知を処理するために変更できない場合に便利です。

以下のバインド ハンドラーを igCombo の Knockout ハンドラーを読み込んだ後に定義します。

<script type="text/javascript">
ko.bindingHandlers.igComboPolyfill = {
    init: function (element, valueAccessor) {
        var combo = $(element),
            isMultiple = valueAccessor().multiSelection ? valueAccessor().multiSelection.enabled : false;

        ko.utils.registerEventHandler(element, "igcomboselectionchanged", function (evt, ui) {
            var item = ui.items[0], dataItem, newText, newValue;

            if (isMultiple) {
                if (ko.isObservable(valueAccessor().text)) {
                    valueAccessor().text(combo.igCombo("text"));
                }
            } else {
                if (item !== undefined) {
                    dataItem = item.data;
                    if (ko.isObservable(dataItem)) {
                        dataItem = dataItem();
                    }
                    newText = dataItem[valueAccessor().textKey];
                    newValue = dataItem[valueAccessor().valueKey];

                    if (ko.isObservable(valueAccessor().text)) {
                        if (ko.isObservable(newText)) {
                            newText = newText();
                        }
                        valueAccessor().text(newText);
                    }
                    if (ko.isObservable(valueAccessor().value)) {
                        if (ko.isObservable(newValue)) {
                            newValue = newValue();
                        }
                        valueAccessor().value(newValue);
                    }
                }
            }
        });

        ko.utils.registerEventHandler(element, "igcombodropdownclosed", function (evt, ui) {
            if (isMultiple) {
                if (ko.isObservable(valueAccessor().text)) {
                    valueAccessor().text(combo.igCombo("text"));
                }
            }
        });

        ko.applyBindingsToNode(element, { igCombo: valueAccessor() });
    },
    update: function (element, valueAccessor) {
        var combo = $(element),
            value = valueAccessor().text();

        if (combo.igCombo("text") !== value) {
            $(element).igCombo("text", value);
        }
    }
};
</script>

以前のロジックを使用し、監視可能項目を文字列として定義できます。

前

<script type="text/javascript">
var model = [
    { name: "Adam Sandler", id: "nm0001191" },
    { name: "Brooke Shields", id: "nm0000222" },
    { name: "Charles Chaplin", id: "nm0000122" },
];
var viewModel = new ViewModel(model);
 function ViewModel(actorsList) {
    this.selectedActor = ko.observable(actorsList[0].name);
 }
</script>
<span id="comboActors" data-bind="igCombo: {
    text: selectedActor,
    textKey: 'name',
    valueKey: 'id'
}"></span>
<input type="text" data-bind="value: selectedActor"/><br />

jQuery の要件