1

我一直使用Harvest 的 Chosen 下拉菜单，它需要在项目上调用一些 js <select>。现在，我正在使用 Knockout 呈现我的选择列表。

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

$(dropdownSelectorOrElement).Chosen()

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

淘汰赛暴露了optionsAfterRender回调（记录在这里：见“注2”）但是：

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

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

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

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

4

2 回答 2

2

我已经解决了这个问题上找到的自定义绑定。

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

于 2013-11-08T09:42:36.797 回答
1

还可以创建 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"
    } ...
};

见小提琴

我希望它有所帮助。

于 2013-11-08T10:10:59.230 回答