Aurelia JS - iterieren durch Kinder (Kendo UI) Elemente?

Question

Betrachten wir das grundlegende Beispiel hier gegeben:

• https://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/slider-basic-use

..., die auch auf gist.run verfügbar:

In der app.html
• https://gist.run/?id=387c43948dc83acf59ea3497472bdfe9

Es gibt mehrere Schieberegler, die alskonstruiert sindvon class="eqSlider", wie folgt aus:

 <input repeat.for="value of equalizerSliderValues" 
       ak-slider="k-orientation: vertical; 
           k-min.bind: -20; 
           k-max.bind: 20; 
           k-value.bind: value; 
           k-small-step.bind: 1; 
           k-large-step.bind: 20; 
           k-show-buttons.bind: false" class="eqSlider"/> 

Was möchte ich, ist, dass ich eine attached() Methode hinzufügen, und durchlaufen alle diese Schieberegler der Klasse eqSlider, drucken Sie sie durch console.log() aus, und rufen Sie die resize() Methode (http://docs.telerik.com/kendo-ui/api/javascript/ui/slider#methods-resize) auf jedem von ihnen.

• Kann ich dies ohne jquery tun - wenn ja, wie?
• Wenn nicht, wie mache ich das mit jquery (wie das docs.telerik.com Beispiel verwendet)? Ich habe versucht, das Hinzufügen:

  import * as $ from 'jquery';

... an der Spitze der app.js im gist.run Beispiel, aber es funktioniert nicht mit:

Failed to load resource: the server responded with a status of 404 (OK) 
bluebird.min.js:29 Unhandled rejection Error: XHR error (404 OK) loading https://gist.host/run/1487343107475/jquery.js 
    at o (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js:4:12694) 
    at XMLHttpRequest.s.onreadystatechange (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js:4:13219) 

Answer 1

Als Alternative zu dem, was von Jeff vorgeschlagen wurde, könnten Sie auch this trick verwenden.

Grundsätzlich kann man eine Reihe von Schiebern definieren, wo die anfängliche widget Eigenschaft ist null:

sliders = [{ 
    value: 10, 
    widget: null 
}, { 
    value: 20, 
    widget: null 
}] 

dann über dieses Array Iterieren repeat.for verwenden, kann die an die k-widgetwidget Eigenschaft jeden Gleiters binden.

<input repeat.for="slider of sliders" 
     ak-slider="k-value.bind: slider.value; 
        k-widget.bind: slider.widget"/> 

Nachdem alle Schieber initialisiert wurden, beenden Sie mit einer Reihe von Schiebern, wo die widget Eigenschaft ist die Kendo Kontrollinstanz.

Mit der .map Funktion für dieses Array können Sie ein Array aller Kendo Slider Widgets erhalten: var sliders = this.sliders.map(x => x.widget);.

Da der k-Widget-Wert nicht verwendet werden kann, nachdem attached() ausgeführt wurde, wie erklärt here, können Sie die TaskQueue tun, was Sie von attached() tun möchten.

Answer 2

let sliders = document.querySelectorAll('.eqSlider'); 

for (let slider of Array.from(sliders)) { 
    console.log(slider.outerHTML); // or whatever values you want. 
    slider.resize(); 
} 

Hier ist ein Kern zeigt, wie dies zu tun, nur um anstelle des gesamten Dokuments das Element gerade:

https://gist.run/?id=debb0337a00d5ef063048fce62a691cf