Aurelia Select2, laden remote Daten nicht geladen nächste Seite

Question

Ich versuche, Select2 zu verwenden und remote Daten (Ajax) in Aurelia zu laden. Also erstelle ich ein benutzerdefiniertes Attribut namens Select2 und folge den Optionen in der Dokumentation.

Aber ich sah ein Problem, wenn ich bis zum Ende der Dropdown-Liste scrollen eine "Lade mehr Ergebnisse" Nachricht erscheint, aber nicht mehr Daten laden oder rufen Sie die API (mit der gleichen API in der Select2-Dokumentation zu machen sicher, dass ich nichts vermisse).

import { customAttribute, inject , bindable, bindingMode} from 'aurelia-framework'; 
import 'jquery'; 
import 'select2'; 

@customAttribute('select2') 
@inject(Element) 
export class Select2CustomAttribute { 
    element; 

    constructor(element) { 
     this.element = element; 
    } 

    attached() { 

       var self=this; 

     $(this.element).select2(
      { 
       // closeOnSelect: false, 
       allowClear: true,   
       ajax: { 
    url: "https://api.github.com/search/repositories", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
    }, 
    processResults: function (data, params) { 
     // parse the results into the format expected by Select2 
     // since we are using custom formatting functions we do not need to 
     // alter the remote JSON data, except to indicate that infinite 
     // scrolling can be used 
     params.page = params.page || 1; 

     return { 
     results: data.items, 
     pagination: { 
      more: (params.page * 30) < data.total_count 
     } 
     }; 
    }, 
    cache: true 
    }, 
       escapeMarkup: function (markup) { return markup; }, 
       minimumInputLength:0, 
       templateResult: function(repo) 
          { 
           if (repo.loading) return repo.text; 

     var markup = "<div class='select2-result-repository clearfix'>" + 
     "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + 
     "<div class='select2-result-repository__meta'>" + 
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; 

     if (repo.description) { 
     markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; 
     } 

     markup += "<div class='select2-result-repository__statistics'>" + 
     "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" + 
     "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" + 
     "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" + 
     "</div>" + 
     "</div></div>"; 

     return markup; 

          }, 
          templateSelection: function (repo) { return repo.full_name || repo.text; } , 

      } 
     ).on('change', evt => { 
       if (!evt.originalEvent) { 
        try{ 
         this.element.dispatchEvent(new Event('change')); 
        }catch(e){ 
         // IE 11+ 
         try{ 
          let evt = document.createEvent('HTMLEvents'); 
          evt.initEvent('change', false, true); 
          this.element.dispatchEvent(evt); 
         }catch(e){ 
          console.log(e); 
         } 
        } 
       } 
      }); 

} 
} 

Answer 1

kopierte ich Ihren Code in eine gist.run und es funktionierte gut: https://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79

Der einzige Unterschied ist, ich lade jQuery und select2 von einem CDN und nicht aus dem Bündel. Sie können ein GIF davon für mich hier arbeiten sehen: http://imgur.com/a/6uSs6