Question

我有一个knockout.js视图，显示了20行数据。每行都有一个用knockout.js绑定的select 2控件。（下面你可以看到我的绑定处理程序）

现在每个选择2指向相同的项目数组。该阵列有大约10,000个条目。这导致整个页面减速（大约2-3秒冻结时间）

我在考虑只在用户点击行时加载选项。像这样：

 self.setSelectedRow = function (entry) {
        entry.options(allOptions);
        var value = entry.intialValue;
        entry.StationdId(value);
    };

在此之后，select 2是可扩展的，我可以选择选项，但不应用initialvalue。关于我做错了什么的暗示？

绑定处理程序：

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);

        $(el).select2(select2);
    }
};

Answer 1

绑定处理程序通常有两个功能：

创建绑定时调用的init函数（请注意，每次创建/重新创建绑定时调用可以多次调用 < - em> - 示例：节点处于if绑定时。这个函数应该包含设置绑定的代码（你做得很好）

一个update函数，每次绑定标记内的observable发生更改时都会调用该函数。请注意，此函数也在init上调用（在init函数之后），因此在某些情况下您不需要init函数。

custom binding doc中的更多信息。

在您的情况下，我认为init功能没问题。

问题是没有设置任何东西来处理你的observables的变化。

您可以添加一个update功能，如下所示（未经测试）：

ko.bindingHandlers.select2 = { init: function (el, valueAccessor, allBindingsAccessor, viewModel) { /* your code is fine */ }, update: function (el, valueAccessor, allBindingsAccessor, viewModel) { var allBindings = allBindingsAccessor(), select2 = ko.utils.unwrapObservable(allBindings.select2); $(el).select2(select2); //update the select2 } };

Answer 2

除非您使用的是非常过时的knockout版本，否则我认为您的绑定语法错误。

这部分错了：

var allBindings = allBindingsAccessor(),
  select2 = ko.utils.unwrapObservable(allBindings.select2);

如果您阅读http://knockoutjs.com/documentation/custom-bindings.html 使用allBindingsAccessor的正确方法（无论如何应该命名为allBindings）是

var select2 = allBindingsAccessor.get('select2') || {};

但即使这是不必要的，valueAccessor会为您提供当前绑定下的内容（select2）。

所以试试这个：

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        $(el).select2(ko.unwrap(valueAccessor()));
    }
};

用淘汰赛选择2个延期加载数据

2 个答案: