title: Knockout.js and large dataset makes dropdown list slow also
body: <p>Does anyone know why the performance on this page is slow when it comes to the dropdown list on the - ALL - option?  I must be doing something wrong with knockout.js for this to happen.  For the smaller list of games it opens up quickly.</p>
  
  <p><a href="http://exposurebasketballtournaments.com/39/adidas-super-64/schedule" rel="nofollow">Tournament Schedule</a></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>(function (app, $, undefined) {
  
      app.viewModel = app.viewModel || {};
  
      function Schedule() {
  
          var self = this;
  
          self.loaded = ko.observable(false);
          self.divisionId = ko.observable();
          self.games = ko.observableArray(null);
  
          self.search = function(url) {
              app.call({
                  type: 'POST',
                  data: { divisionId: self.divisionId() },
                  url: url,
                  success: function (result) {
                      self.games([]);
                      self.games.push.apply(self.games, result);
                      self.loaded(true);
                  }
              });
          };
  
          self.init = function (options) {
              app.applyBindings();
          };
  
      };
  
      app.viewModel.schedule = new Schedule();
  
  } (window.app = window.app || {}, jQuery));
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>     &lt;div class="games hidden" data-bind="if: schedule.games(), css: { 'hidden': !schedule.games() }"&gt;
              &lt;div data-bind="if: schedule.games().length &gt; 0"&gt;
                  &lt;div data-bind="foreach: schedule.games"&gt;
  
                      &lt;h2&gt;&lt;span data-bind="html: Name"&gt;&lt;/span&gt;&lt;/h2&gt;
                      &lt;hr /&gt;
                      &lt;div class="games row" data-bind="foreach: Games"&gt;
                          &lt;div class="span4"&gt;
                              &lt;div class="game game-box new-game-box"&gt;
                                  &lt;div class="datetime-header clearfix new-game-box"&gt;
                                      &lt;span class="time"&gt;&lt;span data-bind="html: DateFormatted"&gt;&lt;/span&gt; - &lt;span data-bind="html: TimeFormatted"&gt;&lt;/span&gt;&lt;/span&gt;,
                                      &lt;span class="gym" data-bind="text: Venue"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div class="team-game clearfix new-game-box" data-bind="css: { winner: AwayTeamIsWinner }"&gt;
                                      &lt;span class="team"&gt;
                                          &lt;a target="_blank" href="#" data-bind="html: AwayTeamName, attr: { href: AwayTeamLink }"&gt;&lt;/a&gt;
                                      &lt;/span&gt; &lt;span class="score" data-bind="html: AwayTeamScoreDisplay"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div class="team-game clearfix new-game-box" data-bind="css: { winner: HomeTeamIsWinner }"&gt;
                                      &lt;span class="team"&gt;
                                          &lt;a href="#" target="_blank" data-bind="html: HomeTeamName, attr: { href: HomeTeamLink }"&gt;&lt;/a&gt;
                                      &lt;/span&gt; &lt;span class="score" data-bind="html: HomeTeamScoreDisplay"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div class="buttons clearfix"&gt;
  
                                      &lt;span class="division" data-bind="html: 'Division ' + DivisionName"&gt;&lt;/span&gt;, 
                                      &lt;span data-bind="text: GameTypeName"&gt;&lt;/span&gt;
                                      &lt;div class="btn-group"&gt;
                                          &lt;a rel="nofollow, noindex" title="Add to calendar" href="#" class="btn btn-mini" data-bind="attr: { href: CalendarLink }"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/a&gt;
                                          &lt;a target="_blank" title="Gym Details" href="#" class="btn btn-mini" data-bind="attr: { href: GymLink  }"&gt;&lt;i class="icon-map-marker"&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="hidden" data-bind="if: (schedule.games() &amp;&amp; schedule.games().length == 0), css: { 'hidden': !schedule.games() }"&gt;
              No games found for this event.
              Scores will be available here the day before the event however the schedule might already be posted under &lt;a href="@Url.Action(MVC.Event.Documents(Model.Event.Id, Model.Event.Slug))"&gt;documents&lt;/a&gt;.
  
          &lt;/div&gt;
   &lt;script type="text/javascript"&gt;
          app.viewModel.schedule.init({});
      &lt;/script&gt;
  </code></pre>