خيارات القائمة المنسدلة بالضربة القاضية تجعل رد الاتصال

Question

لقد استخدمت دائما القائمة المنسدلة المختارة من الحصاد الذي يتطلب بعض JS يدعى ليتم استدعاؤه على أ <select> العنصر. الآن ، أقوم بتقديم قوائم الاختيار الخاصة بي مع خروج المغلوب.

هذا هو الرمز المستخدم لتحويل المنسدلة القياسية في منسدلة مختارة

$(dropdownSelectorOrElement).Chosen()

أنا بحاجة إلى معرفة متى انتهى خروج المغلوب من تقديم <select>, ، من أجل استدعاء الرمز أعلاه: ربما ، يجب أن تشير وظيفة رد الاتصال إلى <select> نفسها حتى أتمكن من المرور دون استخدام المحددات.

خروج المغلوب يعرض optionsAfterRender رد الاتصال (موثق هنا: انظر "الملاحظة 2") ومع ذلك:

• optionsAfterRender يتم استدعاؤه في كل مرة يتم فيها تقديم خيار

• optionsAfterRender يوفر فقط إشارة إلى عنصر الخيار

أنا بحاجة بالضبط إلى شيء مثل optionsAfterRender ولكن دعا فقط عندما يكون كامل <select> انتهى من التقديم. هل خروج المغلوب لديه أي شيء مثل هذا؟

لقد أعددت أ JSfiddle الذي يوضح optionsAfterRender.

Answer 1

لقد حلت مع هذا الربط المخصص الموجود على هذا السؤال.

ko.bindingHandlers.chosen = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        $(element).chosen();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.unwrap(valueAccessor()); // - see comment
        $(element).trigger("liszt:updated");
    }
};

لاحظ أنه إذا لم تستخدم ko.unwrap, ، لن تطلق وظيفة التحديث ، كما قيل لي هذه سؤال يتعلق بهذه القضية.

Answer 2

يمكن أيضًا إنشاء ملزمة لما تلت ذلك:

ko.bindingHandlers.afterRender = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        allBindings.get('afterRender').call(viewModel, element);
    }
};

مع هذا العرض:

<select data-bind="
options: Options,
value: selection,
optionsText: 'text',
optionsValue: 'value',
afterRender: renderCallback
"></select>
<span data-bind="text: selection"></span>

ونموذج العرض هذا:

function viewModel() {

    this.renderCallback = function (selectElement) {
        console.log('call');
    };

    this.Options = [{
        text: "abee",
        value: "123"
    } ...
};

انظر كمان

اتمني ان يكون مفيدا.