javascript - 在Polymer 2中进行递归和渲染

Question

当变量'works'设置为true（铬）时，以下代码可以正常工作，但如果不是，则无效。我试图找出原因。尽管我可以只使用工作中的那个，但也许我应该更好地理解为什么不工作中的那个不起作用。为什么使用this.push一次推送一个数组项与使用this.set设置整个数组之间有什么区别？

'use strict'

var data = [{
  id: 1,
  children: [{
    id: 2
  }, {
    id: 3,
    children: [{
      id: 4
    }, {
      id: 5,
      children: [{
        id: 6
      }, {
        id: 7
      }]
    }, {
      id: 8
    }]
  }, {
    id: 9,
    children: [{
      id: 10,
      children: [{
        id: 11
      }, {
        id: 12
      }, {
        id: 13
      }]
    }, {
      id: 14
    }, {
      id: 15
    }]
  }]
}];

class Polymerology2Element extends Polymer.Element {
  static get is() {
    return 'polymerology2-element';
  }

  static get properties() {
    return {
      nodeData: {
        type: Array,
        value: [],
        notify: true
      },
      node: {
        type: null,
        value: null,
        notify: true
      }
    };
  }

  isOdd(num) {
    return num % 2;
  }


  addNodes() {

    var works = true;

    if (works) {
      if (this.node !== null) {
        var arr = [];
        for (var i = 0; this.node !== undefined &&
          this.node !== null && this.node.children !== undefined && i < this.node.children.length; i++) {

          arr.push(this.node.children[i]);
        }
        setTimeout(() => {
          this.set('nodeData', arr)
        }, 0);
      }
    } else {
      if (this.node !== null) {
        for (var i = 0; this.node !== undefined &&
          this.node !== null && this.node.children !== undefined && i < this.node.children.length; i++) {
          setTimeout(() => {
            this.push('nodeData', this.node.children[i])
          }, 0);
        }
      }
    }
  }

  constructor() {
    super();

    if (Polymerology2Element.instance === undefined) {
      this.nodeData = data;
      this.node = null;
      Polymerology2Element.instance = 0;
    } else
      Polymerology2Element.instance += 1;
    this.instance = Polymerology2Element.instance;
  }

  connectedCallback() {
    super.connectedCallback();
    this.addNodes();
  }
}

window.customElements.define(Polymerology2Element.is, Polymerology2Element);

:host {
  display: block;
}

<base href="https://polygit.org/polymer+polymer+v2.3.1/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />

<polymerology2-element></polymerology2-element>

<dom-module id="polymerology2-element">
  <template>
    <ul>
      <template is="dom-repeat" items="[[nodeData]]" as="item">
        <template is="dom-if" if="{{isOdd(item.id)}}">
          <li>Instance: {{instance}}, Node: {{item.id}} (odd)</li>
          <polymerology2-element node="[[item]]"></polymerology2-element>
        </template>

        <template is="dom-if" if="{{!isOdd(item.id)}}">
          <li>Instance: {{instance}}, Node: {{item.id}} (even)</li>
          <polymerology2-element node="[[item]]"></polymerology2-element>
        </template>
      </template>
    </ul>
  </template>
</dom-module>

Answer 1

这与循环和可变环境的工作方式有关，而与聚合物本身无关。

为什么

请注意您的两个选择之间的以下区别：


在第一个选项中（在works循环中），setTimeOut在循环外部被调用。
但是，在第二个选项（不起作用的选项）中，setTimeOut位于循环内。
这意味着，当您所有的push调用都发生时（因为您选择了0超时，就在调用堆栈的末尾），您的for循环已经结束。 i已增加并且等于this.node.children.length + 1。 （+ 1是因为达到this.node.children.length后，由于i，您的i++将再次增加）。这就是为什么您达不到预期的原因：您实际上在做this.push('nodeData', this.node.children[ this.node.children.length + 1 ])几次。


怎么修
我了解您已经有了一个可行的选择，并且并没有真正在寻找您的this.push选择的修正-但是，如果将来遇到类似的情况，通常可以这样做：您需要创建一个闭包您的setTimeOut以便在调用回调时记住i的值。

试试看：

        for (var i = 0; /* ... your conditions */; i++) {
          (function(j) {
            setTimeout(() => {
             this.push('nodeData', this.node.children[j])
            }, 0);
          })(i);
        }