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>

这个View模型：

function viewModel() {

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

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

See fiddle

我希望它有所帮助。

Knockout下拉选项呈现回调

2 个答案: