Question

我在一个foreach的视图中嵌套了if / else绑定，这需要大约一秒钟的时间。创建Dom时，它将阻止渲染。我正在计划在JavaScript中执行if / else条件，并将整个dom元素运送到为加快速度而准备的视图中。但是，我是淘汰赛的新手，因此不确定这是否有效，还是有更好的选择。下面的代码是令人讨厌的代码，其中大部分数据都被剥离以显示结构。在个体a，li等内部是与DOM元素的个体绑定。

<ul data-bind="foreach: categories; ">
<!-- ko if: $data.childCategories -->

<!-- ko ifnot: $data.id == 'example' -->

<!-- ko if: $data.id == 'another-example' -->

<li data-bind="attr: {'data-children': childCategories}">
    <!-- ko if: $data.id.indexOf('link-') < 0 -->
        <!-- ko if: $data.childCategories -->
            <a>

            </a>
        <!-- /ko -->
        <!-- ko ifnot: $data.childCategories -->
            <a>

            </a>
        <!-- /ko -->
    <!-- /ko -->

    <!-- ko if: $data.id.indexOf('link-') >= 0 -->
        <!-- ko if: $data.longDescription.indexOf('http') >= 0 -->
            <!-- ko if: $data.childCategories -->
                <a></a>
            <!-- /ko -->
            <!-- ko ifnot: $data.childCategories -->
                <a></a>
            <!-- /ko -->
        <!-- /ko -->
        <!-- ko ifnot: $data.longDescription.indexOf('http') >= 0  -->
            <!-- ko if: $data.childCategories -->
                <a></a>
            <!-- /ko -->
            <!-- ko ifnot: $data.childCategories -->
                <a></a>
            <!-- /ko -->
        <!-- /ko -->
    <!-- /ko -->


    <ul data-bind="foreach: childCategories ">
        <li>
            <!-- ko if: $data.id.indexOf('link-') < 0 -->
                <a></a>
            <!-- /ko -->

            <!-- ko if: $data.id.indexOf('link-') >= 0 -->
                <!-- ko if: $data.longDescription.indexOf('http') >= 0 -->
                    <!-- ko if: $data.childCategories -->
                        <a></a>
                    <!-- /ko -->
                    <!-- ko ifnot: $data.childCategories -->
                        <a></a>
                    <!-- /ko -->
                <!-- /ko -->
                <!-- ko ifnot: $data.longDescription.indexOf('http') >= 0  -->
                    <!-- ko if: $data.childCategories -->
                        <a></a>
                    <!-- /ko -->
                    <!-- ko ifnot: $data.childCategories -->
                        <a></a>
                    <!-- /ko -->
                <!-- /ko -->
            <!-- /ko -->


            <!-- ko if: $data.childCategories -->
                <div>
                    <div>
                        <div>
                            <!-- ko if: $data.id.indexOf('link-') < 0 -->
                                <a></a>
                            <!-- /ko -->
                            <!-- ko if: $data.id.indexOf('link-') >= 0 -->
                                <!-- ko if: $data.longDescription.indexOf('http') >= 0 -->
                                    <a></a>
                                <!-- /ko -->
                                <!-- ko ifnot: $data.longDescription.indexOf('http') >= 0  -->
                                    <a></a>
                                <!-- /ko -->
                            <!-- /ko -->
                        </div>
                        <ul data-bind="foreach: $data.childCategories">
                            <li></li>
                        </ul>
                    </div>
                </div>
            <!-- /ko -->
        </li>
    </ul>
</li>
<!-- /ko -->

<!-- ko ifnot: $data.id == 'another-example' -->
<li data-bind="attr: {'data-children': childCategories}">
        <!-- ko if: $data.id.indexOf('link-') < 0 -->
            <!-- ko if: $data.childCategories -->
                <a>

                </a>
            <!-- /ko -->
            <!-- ko ifnot: $data.childCategories -->
                <a>

                </a>
            <!-- /ko -->
        <!-- /ko -->

        <!-- ko if: $data.id.indexOf('link-') >= 0 -->
            <!-- ko if: $data.longDescription.indexOf('http') >= 0 -->
                <!-- ko if: $data.childCategories -->
                    <a></a>
                <!-- /ko -->
                <!-- ko ifnot: $data.childCategories -->
                    <a></a>
                <!-- /ko -->
            <!-- /ko -->
            <!-- ko ifnot: $data.longDescription.indexOf('http') >= 0  -->
                <!-- ko if: $data.childCategories -->
                    <a></a>
                <!-- /ko -->
                <!-- ko ifnot: $data.childCategories -->
                    <a></a>
                <!-- /ko -->
            <!-- /ko -->
        <!-- /ko -->




            <!-- ko if: $data.childCategories -->
            <div>
                    <div>
                        <div>
                            <!-- ko if: $data.id.indexOf('link-') < 0 -->
                                <a></a>
                            <!-- /ko -->
                            <!-- ko if: $data.id.indexOf('link-') >= 0 -->
                                <!-- ko if: $data.longDescription.indexOf('http') >= 0 -->
                                    <a></a>
                                <!-- /ko -->
                                <!-- ko ifnot: $data.longDescription.indexOf('http') >= 0  -->
                                    <a></a>
                                <!-- /ko -->
                            <!-- /ko -->
                        </div>
                        <ul data-bind="foreach: $data.childCategories">
                            <li></li>
                        </ul>
                    </div>
                </div>
            <!-- /ko -->









    </li>
<!-- /ko -->


<!-- /ko -->




<!-- /ko -->


<!-- ko ifnot: $data.childCategories -->

    <!-- ko if: $data.id.indexOf('link-') < 0 -->
        <li>
            <a>
            </a>
        </li>
    <!-- /ko -->
    <!-- ko if: $data.id.indexOf('link-') >= 0 -->
        <li></li>
    <!-- /ko -->
<!-- /ko -->

Answer 1

您是否尝试过在您的observableArray（）上放置一个延迟更新扩展名？这样，这一切都是异步发生的，主要是在任何UI（重新）绘制之前

this.data = ko.observableArray().extend({ deferred: true });

有关更多信息，请参见：https://knockoutjs.com/documentation/deferred-updates.html

或者，当您准备数据时，还有一个小技巧，如果您已经在使用observableArray（）并在更新绑定的儿童可观察对象的过程中进行迭代等等，那么会有很多通知来回进行，有时使用一个简单的js对象会更容易，然后像这样将所有更改立即推回可观察的

var items = ko.observableArray();
//do something with the items here
items.push.apply(items, [1, 2, 3, 4]);

以这种方式进行操作可能会帮助您将if-then-else检查设置为bool在数组中的每个项目上，在ui渲染将其整理出来并移入代码时将检查抬高。一条建议。无论哪种方法，剔除方法都应该能够处理-如果有条件的话，否则在不查看ui中太多问题的情况下，大多数情况下，您可以通过重新考虑可观察对象的使用方式来加快处理速度。

我已经研究了将来自api的20k多个项保存到observableArray中的控件，将条件中的子集过滤掉，并在几毫秒内将它们显示在模板上，并在所有条件下将它们显示在网页上。（是的，我知道适当的使用量很多，但这不是重点）

视图中的复杂嵌套嵌套if / else导致性能问题

1 个答案: