knockout.js搜索可觀察數組文本凍結

我遇到了一個問題，我在可觀察數組上的keyupdate上搜索，有時頁面凍結。在「indexOf」插入邏輯時發生。我只想隱藏被過濾掉的對象。它主要發生在我不到2個字符時。有1500行。我注意到的另一件事情只發生在Chrome中，但在IE中它工作得很好！knockout.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); 
      });

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

來源

2012-12-19 Mike Flynn

我更新了visible: visible()到if: visible()，問題消失了。

來源

2012-12-19 23:18:00

knockout.js搜索可觀察數組文本凍結

回答

相關問題