Question

我有一个问题，我在一个可观察的数组上搜索keyupdate，有时页面会冻结。当“indexOf”插入逻辑中时会发生这种情况。我只是想隐藏被过滤掉的对象。它主要发生在我2个字符以下时。有1500行。我注意到的另一件事只发生在Chrome中，但在IE中它的工作效果很快！

JS

            var self = this,
                intervalId = null;

            self.powerSchoolCourses = ko.observableArray([]);

            // Stores The Text To Filter The Powerschool Course List
            self.powerSchoolCourseSearchText = ko.observable('');

            self.powerSchoolCourseSearchText.subscribe(function (searchText) {

                if (intervalId)
                    clearTimeout(intervalId);

                intervalId = setTimeout(function () {

                    var powerSchoolCourses = self.powerSchoolCourses();

                    ko.utils.arrayForEach(powerSchoolCourses, function(powerSchoolCourse) {

                        if (searchText.length < 3) {
                            powerSchoolCourse.visible(true);
                        } else if (powerSchoolCourse.courseName.toLowerCase().indexOf(searchText) == -1) {
                            powerSchoolCourse.visible(false);
                        } else {
                            powerSchoolCourse.visible(true);
                        }
                    });

                }, 300);
            });

UI

<div class="filter">
                                    <div class="input-prepend">            
                                        <span class="add-on"><i class="icon-search"></i></span>
                                        <input class="span2" type="text" placeholder="Powerschool Course Name" data-bind="value: powerSchoolCourseSearchText, valueUpdate: 'afterkeydown'" />                                         
                                    </div>
                                </div>

    <!-- ko foreach: powerSchoolCourses -->
                                    <div class="ps-course" data-bind="draggableCourse: {}, css: { 'even-row': $index()%2 }, visible: visible()">
                                        <span class="icon-move"></span>
                                        <span data-bind="html: courseName"></span> (<span data-bind="html: courseNumber"></span>)

                                        <!-- ko foreach: brainHoneyTypesSorted -->
                                        <span class="badge" data-bind="html: $data[0]"></span>
                                        <!-- /ko -->

                                        <a class="icon-plus" data-bind="click: $root.showSections.bind($data), attr: { title: showSections() ? 'Hide Sections' : 'Show Sections' }, css: { 'icon-minus': showSections() }"></a>
                                    </div>

                                    <div class="sections" data-bind="visible: showSections()">
                                        <div class="header">
                                            <!-- ko if: loadingSections() -->
                                            Loading Sections...
                                            <!-- /ko -->
                                            <!-- ko if: !loadingSections() && sections().length == 0 -->
                                            No Sections Found
                                            <!-- /ko -->
                                            <!-- ko if: !loadingSections() && sections().length > 0 -->
                                            Sections
                                            <!-- /ko -->
                                        </div>
                                        <div class="data">
                                            <!-- ko foreach: sections -->
                                            <div class="ps-section" data-bind="css: { 'even-row': $index()%2 }">
                                                <span data-bind="html: schoolName"></span>
                                                <span data-bind="html: teacherLastName"></span>
                                                <span data-bind="html: courseName"></span>
                                                <span data-bind="html: term"></span>
                                                <span data-bind="html: expression"></span>
                                                <span data-bind="html: bhType"></span>
                                            </div>
                                            <!-- /ko -->
                                        </div>
                                    </div>
                                    <!-- /ko -->

Answer 1

我将visible: visible()更新为if: visible()，问题就消失了。

knockout.js搜索文本冻结的可观察数组

1 个答案: