Использование рулей для итерации над сложным объектом

У меня есть специальный массив, как я могу его использовать?Использование рулей для итерации над сложным объектом

Это выглядит следующим образом:

{ 
       "0.1.0": { 
        "pictures": { 
         "list": "" 
         }, 
        "show": true, 
        "implemented ": false, 
        "percentageDoneVersion": 100,     
        "description": "Programmierung ...", 
        "tasks": { 
        "1":{ 
          "percentageDone":10, 
          "description":"Text1..." 
         }, 
         "2":{ 
          "percentageDone":70, 
          "description":"Text2..." 
         }, 
         "3":{ 
          "percentageDone":10, 
          "description":"Text3..." 
          } 
        } 
       }

}

Я пробовал разные вещи, но они ничего не вышло ...

Спасибо.

источник

2015-07-28 user254197

Под фразой _ «Мне нужно пропустить элемент {{versionContent .-. Description}}" _, вы имеете в виду, что вы не хотите выводить этот атрибут? Можете ли вы написать полный вывод, который хотите получить от этого объекта? – AimZ

Ваш необходимый результат не совсем ясен. Не могли бы вы предоставить желаемый результат или его DOM (не обязательно шаблон, но только HTML) в вопросе? Что касается вашей озабоченности по неизвестной длительности задач, ее можно легко обработать с помощью «каждого» блока. – AimZ

Я не вполне ясно, о требованиях, но согласно предоставленной информации, похоже, вы ищете от чего-то ссылки это:

<script id="template" type="text/x-template"> 
    <div class="row" style=""> 
    <hr> 
    <div class="col-xs-12 col-lg-12"> 
     <div class="panel-group"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#versionHeading{{@index}}" href="#versionHeading{{@index}}">{{{body.project.versionHeading}}}</a></h4> 
      </div> 
      <div id="versionHeading{{@index}}" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       <p>{{{body.project.versionIntro}}}:</p> 
       {{#each body.project.versionContent}} 
       <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#mainVersion{{@index}}" href="#mainVersion{{@index}}">Version {{@key}}</a></h4> 
       </div> 
       <div id="mainVersion{{@index}}" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
        <p>{{{this.description}}}</p> 
        <ul> 
         {{#each this.tasks}} 
         <li>{{@key}}.) {{{this.description}}} (progress ({{this.percentageDone}}% done)</li> 
         {{/each}} 
        </ul> 
        </div> 
       </div> 
       </div> 
       {{/each}} 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</script>

Если предположить, что ваш предоставленные данные JSON обернут внутри тела и структуры проекта, т.е.

{ 
    "body": { 
     "project": { 
      "versionContent": { 
        .... 
      } 
     } 
    } 
}

Вот рабочий jsFiddle из ваших данных и HTML. Вы можете улучшить это по мере необходимости. Версия и задачи могут расти динамически. Я рекомендую вам пройти this простой учебник рулевой колонки.

источник

2015-07-30 17:03:34 AimZ

Удалить переменную 'wrapper'. Вместо 'return template (wrapper);', используйте 'return template (data);'. – AimZ

Использование рулей для итерации над сложным объектом

ответ

Смежные вопросы