依赖 observable 中的大型数组 - 级联 [英] large arrays in dependent observables - cascading
问题描述
我正在使用 Knockout JS，因为业务需求表明，由于低带宽用户，大多数(如果不是全部)逻辑都在浏览器中处理.到目前为止，除了一个问题外，效果非常好.
I am using Knockout JS, as business requirements dictate that most, if not all logic is processed in the browser due to low bandwidth users. It's working out awesome so far except for one issue.
我使用了许多包含级联逻辑的多选下拉列表.比如说，我有 8 个列表来处理分层数据并更改子列表中的可选选项.
I am using a number of multiselect dropdown lists that all contain cascading logic. I have, say 8 lists that process hierarchical data and alter selectable options in child lists.
这一切都很好，直到我到达底部 2 个列表，这些列表可能包含 3000 个项目，具体取决于父列表选择(尤其是在单击全选"时).
This is all good until I get to the bottom 2 lists which could potentially contain 3000 items depending on parent list selections (especially when 'select all' is clicked).
问题是，在 IE 中，我收到了长时间运行的脚本警告消息，我需要将其删除.这是一些代码:
the problem is, in IE, I'm getting long running script warning messages, which I need to get rid of. Here's some code:
viewModel.BottomLevelList= ko.dependentObservable(function () {
if (this.ParentList().length === 0) { //nothing selected
return [];
}
var result = [];
var i = self.longMasterList.length;
var currentId = 0;
while (i--) {
//psuodo code:
//this.ParentList().Contains(loop-item) then
//put in return list based on some further logic
//else continue
}
return result;
}, viewModel);
我尝试使用 SO 的各种 setTimeout 技术来分解大数组并将控制权暂时返回给浏览器，但没有成功.结果永远不会返回和/或 observable 似乎自己分离，在 UI 中留下一个空列表.
I have tried using various setTimeout techniques from SO to break the large array up and return control momentarily to the browser, but with no success. The result is never returned and / or the observable seems to detach itself leaving an empty list in the UI.
如果我需要使用 AJAX，我会，但这是最后的手段，我更愿意将它保留在客户端中.
If I need to use AJAX I will, but this is a very last resort and would prefer to keep it in the client.
所以我的问题归结为:
- 如何停止因处理大型数据集而导致长时间运行的脚本警告(在 Knockout JS 依赖的 observables 和级联列表的上下文中)
- 是否有一些我可以/应该在这种情况下使用的惯用 JavaScript 技术
- 我是不是只见树木不见森林?！
非常感谢您的帮助
推荐答案
我会首先建议你优化你的 dependentObservable.当您读取任何 observable 时，Knockout 会在 Dependency Manager 中注册对其的依赖项.它包含非常简单的代码，如下所示:
I would first suggest that you optimize your dependentObservable.
When you read any observable, Knockout registers a dependency to it in Dependency Manager. It contains pretty simple code like this:
function registerDependency(observable) {
if (ko.utils.arrayIndexOf(dependencies, observable)) {
dependencies.push(observable);
}
}
我可以在您的伪代码中看到您正在 while 循环中访问 this.ParentList().这意味着 registerDependency 将被调用 3000 次并且 dependencies 数组将被扫描 3000 次，这对 IE 不利(因为它没有内置的 Array.indexOf 方法).
I can see in your pseudo-code that you are accessing this.ParentList() in the while loop. It means registerDependency will be called 3000 times and the dependencies array will be scanned 3000 times, which is bad for IE (since it has no built-in Array.indexOf method).
所以我的第一个建议是:在循环之前阅读所有可观察的.
So my number one suggestion would be: Read all observables before loops.
如果没有帮助，我建议您继续使用 setTimeout().这有点棘手.请查看此示例:http://jsfiddle.net/romanych/4KGAv/3/
If it doesn't help, I suggest that you proceed with setTimeout(). It is a bit tricky. Please check out this example: http://jsfiddle.net/romanych/4KGAv/3/
我已经定义了 asyncObservable.您应该传递一个包含您的dependentObservable 的所有依赖项的数组.当 ko.toJS 被调用时，所有的 observable 都会被解包.然后我们使用 dependencies 数组中枚举的参数调用传递的回调函数.此函数将被异步评估.
I have defined asyncObservable. You should pass an array with all dependencies of your dependentObservable. When ko.toJS is called, all observables are unwrapped. Then we call the passed callback function with arguments enumerated in the dependencies array. This function will be evaluated async.
我已将此代码包装到 ko.dependentObservable 中，以便在 dependencies
I have wrapped this code into ko.dependentObservable to re-evaluate loader callback on any change of passed elements passed in dependencies
更新:对于这个问题，我的代码过于复杂.油门扩展器 可以解决这个问题.请查看此示例:http://jsfiddle.net/romanych/JNwhb/1/
UPDATE: My code was overcomplicated for this issue. throttle extender will do the trick. Please checkout this sample: http://jsfiddle.net/romanych/JNwhb/1/
这篇关于依赖 observable 中的大型数组 - 级联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
