Вложенный dom-repeat ничего не отображает

Question

Я пытаюсь сделать вложенный dom-repeat, у меня нет ошибок, но все равно у меня пустой дисплей. Изучая элементы, я вижу, что данные на самом деле есть, а также страница показывает что-то в течение очень короткого времени, прежде чем исчезнет. Ниже приведен фрагмент кода:

     <iron-ajax auto url="http://localhost:8808/datal2" handle-as="json" last-response="{{top}}"></iron-ajax>

     <template is="dom-repeat" items="{{top.top}}" as="item">
       <div>
         <span id="l4-support-offering-[[index]]">{{item.l2}}</span>
       </div>


       <iron-ajax auto url="[[computeCompleteUrl(item.l2)]]" handle-as="json" last-response="{{top}}"></iron-ajax>

        <template is="dom-repeat" items="{{top.top}}" as="level24" index-as="indexl24">
          <div>
            <span id="l4-support-offering-l4[[indexl24]]">{{level24.l4}}</span>
          </div>
        </template>
     </template>

    <script>

    ........
      properties: {
    top: {
      type: Array,
      value: function() { return []; }
    },
    level24: {
      type: Array,
      value: function() { return []; }
    },
    ................

Полимер v 1.8.0

Я изменил код:

 <p>
  Hello!
</p>
<iron-ajax auto url="http://localhost:8808/datal2" handle-as="json" last-response="{{lev2}}"></iron-ajax>


     <template is="dom-repeat" items="{{lev2.top}}" as="iteml2">
         <span id="l4-support-offering-[[index]]">{{iteml2.l2}}</span><br>

     <iron-ajax auto url="[[computeCompleteUrl(iteml2.l2)]]" handle-as="json" last-response="{{lev4}}"></iron-ajax>
            <template is="dom-repeat" items="{{lev4.l4byl2}}" as="level4" index-as="indexl24">
                <span id="l4-support-offering-l4[[indexl24]]">{{level4.l4}}</span>

            </template><br>


</template>
 <script>
Polymer({
  is: 'game',

  properties: {
    lev2: {
      type: Array,
      value: function() { return []; }
    },
    lev4: {
      type: Array,
      value: function() { return []; }
    }
  },

  computeCompleteUrl: function(level) {
    return 'http://localhost:8808/datal4byl2/' + level;
    console.log("manager is:" +level);
  },

Сейчас у меня что-то отображается, но это не правильно. У меня есть что-то вроде

X 1,2,3,4 Y 1,2,3,4 Z 1,2,3,4

пока так и должно быть (это всего лишь пример)

X 8,2,4 Y 6,8,5,2 Z 1,2,3,4

поэтому он всегда заполняется данными последнего элемента из первого списка.

Answer 1

В конце концов это сработало после того, как я изменил второй дом-повтор на:

 <template is="dom-repeat" items="{{getLevelFours(item.l2)}}"  as="level24" index-as="indexl24">

и используемые функции:

 computeCompleteUrl: function(level) {
     return 'http://localhost:8808/datal4byl2/' + level;
  },
 getLevelFours: function(level) {
     let theUrl = this.computeCompleteUrl(level);
     // http request based on url
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
     xmlHttp.send( null );
     var myjson = JSON.parse(xmlHttp.responseText)
     return myjson.l4byl2;

Answer 2

Вы ссылаетесь на top.top но эта переменная не существует. Ваш top свойство типа Array так что ты не можешь сделать top.top, Во-первых, вы должны пройти через top свойство, а затем во вложенном dom-repeat - item.top (возможно, вы просто ошибочно скопировали свой код)