Clever Geek Handbook

Throttle valve adjustment

I have a knockout plugin problem with IE8. Our situation is that we are sending all possible records that can be displayed to the client. We then handle all the paging and filtering on the client side for the responsive system.

We are currently submitting a list of 250 posts to be displayed in a jQuery template based grid via jQuery ajax. When we call ko.mapping.fromJS (not the fromJSON function) to map objects, we get a "Script too long" message from IE8. Doesn't happen in FF and Chrome as their java script is much faster.

Is there a direct way to throttle the display? This is a long term problem as we may have a situation where we have about 1000 records to send to a client.

+3


source to share


3 answers


IE is a naughty little one ... isn't it.

When doing data binding to javascript, if there is a significant update to the UI, I do something like the following.

function ajaxCallback(listOfDataItems){

  var addToUiFunction = function(item){
     // add it to the ko.observable array which is data bound to the UI
     myDataBoundArray.push(item);
  };

  for (var i = 0, arrayLength = listOfDataItems.length; i < arrayLength; i++){
    var temp = listOfDataItems[i];

    //create an immediately executing function to close around
    //the item that returns a function to call at a later date.
    var tempFunction = (function(){
      var item = temp;
      return function() { addToUiFunction(item) };
    })();

    setTimeout(tempFunction, 0);

  }
}


What happened here is that I only add one element to the interface. I am using setTimeout with a delay of 0 to delay the execution of an individual add until the current call completes. This means very short units of work that won't leave your browser.

ps the code is a bit quirky, it's just trying to illustrate the point.

+2


source


We had the same problem. Our viewmodel had too much observable data computed and this made the script run slower. Removing unwanted followers can save you from this problem.



0


source


I know this is not a perfect answer, but if your situation allows it, you can always just not display internal items. Ex. If your ajax call returns 1000 people, and you want your UI to update and show all those people, you can have an observable array of raw people js objects (not their co-mapping equivalent) in your view model. If you add or remove elements from your observable array, it will display correctly in the UI, but it won't help you if you need to subscribe to all property change events on all properties of each person.

Usually when I tackle this bunch of items, it is for reporting, so I don’t need to edit the items themselves, but you do need to add / remove rows from the report depending on the filter criteria.

0


source






More articles:


All Articles