时间戳

首页 > 解决方案 > 如何在 Polymer 中随机化 div 的显示顺序

javascript - 如何在 Polymer 中随机化 div 的显示顺序

问题描述

我正在尝试随机化 Polymer 中 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吗？

标签： javascriptpolymerdom-repeat

解决方案

您链接的解决方案使用 jQuery 选择divs 而在您的情况下cards，作为本机querySelector调用的结果，没有eqandbefore方法。

这可以解决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>

推荐阅读