如何随机化聚合物中 div 的显示顺序

Question

我正在尝试随机化聚合物中div的显示，但是在将这篇文章翻译成框架时遇到了麻烦。

页面加载时的随机div 顺序

ready() {
super.ready();
let cards = this.shadowRoot.querySelectorAll('.className');
for(var i = 0; i < cards.length; i++){
let target = Math.floor(Math.random() * cards.length -1) + 1;
let target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}

调用cards.eq时此操作失败...

这可以用dom-repeat解决吗？

Answer 1

您链接的解决方案使用 jQuery 来选择div，而在您的情况下，cards是本机querySelector调用的结果，没有eq和before方法。

这可以用dom-repeat解决吗？

是的：您可以将div 后面的数据模型存储在属性中，并在渲染div 之前对其进行洗牌：

<dom-module id="my-view">
<template>
<!-- Render the divs using dom-repeat -->
<template is="dom-repeat" items="[[divs]]">
<div>{{item.name}}</div>
</template>
</template>
<script>
class MyView extends Polymer.Element {
static get is() { return 'my-view'; }
static get properties() {
return {
divs: {
type: Array,
value: [],
}
};
}
// In connectedCallback you can initialise the divs property
// by shuffling the initial ordered array using the Fisher-Yates algorithm
// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
connectedCallback() {
super.connectedCallback();
let array = [ // The ordered model behind the divs
{ name: 'Div #1' },
{ name: 'Div #2' },
{ name: 'Div #3' },
{ name: 'Div #4' },
{ name: 'Div #5' },
];
let currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
this.divs = array;
}
}
window.customElements.define(MyView.is, MyView);
</script>
</dom-module>