淘汰赛下拉选项呈现回调

Question

我一直使用Harvest's Chosen dropdown，这需要在<select> 项目上调用一些js。现在，我正在使用 Knockout 呈现我的选择列表。

这是用于在选择下拉列表中转换标准下拉列表的代码

$(dropdownSelectorOrElement).Chosen()

我需要知道何时 Knockout 完成了<select> 的渲染，以便调用上面的代码：可能，回调函数应该引用<select> 本身，这样我就可以不通过了选择器的使用。

Knockout 暴露了 optionsAfterRender 回调（记录在 here：参见“注释 2”）：

• 每次呈现选项时都会调用optionsAfterRender

• optionsAfterRender 仅提供对选项元素的引用

我需要像optionsAfterRender 这样的东西，但只有在整个<select> 完成渲染时才调用。淘汰赛有这样的吗？

我准备了一个jsfiddle 来说明optionsAfterRender。

Answer 1

我已经用this question 上的自定义绑定解决了。

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，更新功能将不会触发，正如在与此问题相关的this 问题中告诉我的那样。

Answer 2

还可以创建 afterRender 绑定：

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"
    } ...
};

See fiddle

希望对你有帮助。