1

Select2 を使用する<select>と、いくつかのスタイルと機能を適用して標準を改善できます。Knockout にカスタム バインドされた Select2 スタイルのドロップダウン リストを表示する必要があります。

これは電話番号リストであり、ユーザーはいくつかのエントリを追加できます。 編集可能にしたい。

ユーザーは、アプリケーションで使用できるエントリを選択するか、新しいエントリを入力できる必要があります (バインドされていますmanager.selectedPhoneNumber) 。

したがって、HTML では次のようになります。

<body>
<select id="list" data-bind="
    options: manager.getMyPhoneNumbers(),
    optionsValue: 'id',
    optionsText: 'text',
    customBinding_phoneNumbersEditableList: manager.selectedPhoneNumber
    ">
</select>
</body>

そしてJavascriptで：

ko.bindingHandlers.customBinding_phoneNumbersEditableList = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                // initialize select2 with binded element
                $(element).select2({
                    //createSearchChoice: function (term, data) {
                    //    if ($(data).filter(function () {
                    //        return this.text.localeCompare(term) === 0;
                    //    }).length === 0) {
                    //        return {
                    //            id: term,
                    //            text: term
                    //        };
                    //    }
                    //},
                    formatResult: function (item) {
                        return buildSomePrettyString();
                    },
                    formatSelection: function (item) {
                        return buildSomePrettyString();
                    },
                    sortResults: function (results, container, query) {
                        return results;
                    }
                });
            },
            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { }
        };

関数のコメントを外してcreateSearchCoiceください。例外が発生しますError: Option 'createSearchChoice' is not allowed for Select2 when attached to a <select> element.

誰かが私を助けることができますか？

4

0 に答える 0