大阵在相关观测 - 级联 [英] large arrays in dependent observables - cascading

查看:116
本文介绍了大阵在相关观测 - 级联的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用淘汰赛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中,我得到长期运行的脚本警告消息,这是我需要摆脱的。下面是一些code:

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);

我使用各种setTimeout的技术,从这么破大阵了,并立即将控制返回给浏览器都试过了,但没有成功。结果再也没有回来和/或观察到的似乎脱离自己留在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我的意思,这是一个非常最后的手段,将preFER,以保持它在客户端。

If I need to use AJAX I will, but this is a very last resort and would prefer to keep it in the client.

所以我的问题归结为:

  • 如何停止长时间运行的脚本警告为处理大数据集(在淘汰赛JS依赖观测量的背景和级联列表)的结果
  • 有一些惯用的JavaScript技术,我可以/应该使用在这种情况下
  • 难道我没有看到树不见林在这里?!

感谢您长久的帮助

推荐答案

我首先建议您优化 dependentObservable 。 当你阅读任何可观察到,淘汰赛注册一个依赖于它依赖管理。它包含pretty的简单code是这样的:

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);
    }
}

我可以在您访问this.ParentList()在,而循环的伪code见。这意味着 registerDependency 将被调用3000次,依赖阵列将被扫描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 被调用时,所有的观测值都解开。然后我们调用传递的回调函数,列举了依赖数组参数。该功能将被评估异步。

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.

我裹着这code到ko.dependentObservable就在相关性通过传递的元素的任何改变重新评估加载回调

I have wrapped this code into ko.dependentObservable to re-evaluate loader callback on any change of passed elements passed in dependencies

更新: 我的code的过于复杂了这个问题。 油门扩展会做的伎俩。请结帐这个示例: 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/

这篇关于大阵在相关观测 - 级联的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆