Aurelia JS - iterate through children (kendo UI) elements?

问题

Consider the basic example given here:

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

... which is also available on gist.run:

https://gist.run/?id=387c43948dc83acf59ea3497472bdfe9

In that app.html, there are several sliders constructed as input of class="eqSlider", like this:

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

What I would want, is that I add an attached() method, and iterate through all these sliders of class eqSlider, print them out through console.log(), and call the resize() method ( http://docs.telerik.com/kendo-ui/api/javascript/ui/slider#methods-resize ) on each of them.

Can I do this without jquery - if so, how?
If not, how do I do that with jquery (as the docs.telerik.com example uses that)? I've tried adding:
```
import * as $ from 'jquery';
```

... at top of app.js in the gist.run example, but it fails with:

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)

回答1:

As an alternative to what has been proposed by Jeff you could also use this trick.

Basically you can define an array of sliders where the initial widget property is null:

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

Then, iterating over this array using repeat.for, you can bind the k-widget to the widget property of each slider.

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

After all sliders have been initialized, you end up with an array of sliders where the widget property is the Kendo control instance.

By using the .map function on this array you can get an array of all Kendo slider widgets: var sliders = this.sliders.map(x => x.widget);.

Since the k-widget value cannot be used after attached() has been executed, as explained here, you can use the TaskQueue to do what you would like to do from attached().

回答2:

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

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

Here's a gist showing how to do this by only searching through the element instead of the entire document:

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

来源：https://stackoverflow.com/questions/42301109/aurelia-js-iterate-through-children-kendo-ui-elements

标签

javascript

aurelia