Как визуализировать массив в JsRender без итерации?

Question

У меня есть некоторые динамические данные, загруженные в массив с именем "tabNames", как это:

    tabNames.push({name: hit.category});

Затем мне нужно перечислить поля "имя" в следующем HTML. Я хочу перечислить первые 7 значений "name" в массиве "tabNames" по горизонтали, а затем остальные в раскрывающемся списке.

Это мой HTML

        <div id="categories" class="food-category-tab">
            <script id="categoriesList" type="text/x-jsrender">
                 <ul id="myTab" class="nav nav-tabs">
                 {{if #index <=6}}
                <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
                {{/if}}
                {{if #index >6}}
                 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
                  </ul>
                </li>
                {{/if}}
              </ul>
                </script>
         </div>

И я вызываю jsrender из файла js, где написана функция для загрузки содержимого в массив "tabNames", как показано ниже:

    $("#categories").html($("#categoriesList").render(tabNames));

Кто-нибудь может сказать, что не так с кодом и как это исправить?

Answer 1

Вы передаете массив для рендеринга, поэтому для каждого элемента отображается весь шаблон, включая перенос <ul,

Два способа справиться с этим:

1: Вызовите рендер с логическим флагом: noIteration:

$("#categoriesList").render(tabNames, true);

затем используйте шаблон, который перебирает #data такие как:

<ul id="myTab" class="nav nav-tabs">
    {{for #data}}
        ...
    {{/for}}
    {{if #data.length>6}}
        ...
    {{/if}}
</ul>

Или 2: передать ваш массив как свойство:

var data = {names: tabNames};
$("#categoriesList").render(data);

И использовать аналогичный шаблон, но итерации по namesне #data:

<ul id="myTab" class="nav nav-tabs">
    {{for names}}
        ...
    {{/for}}
    {{if names.length>6}}
        ...
    {{/if}}
</ul>

В любом случае, шаблон для отображения двух уровней списка может быть структурирован следующим образом:

<ul id="myTab" class="nav nav-tabs">
    {{for names.slice(0, 7)}}
        <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
    {{/for}}
    {{if names.length>6}}
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
            <ul class="dropdown-menu">
                {{for names.slice(7)}}
                    <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
                {{/for}}
            </ul>
        </li>
    {{/if}}
</ul>

Также возможно использовать {{if}}...{{else}} и т. д., но это нарушает естественную объединенную иерархию разметки HTML и JsRender, и поэтому является менее изящным и менее поддерживаемым - как это:

<ul id="myTab" class="nav nav-tabs">
    {{for names}}
        {{if #index<=6}}
            <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
        {{else #index===7}}
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
        {{else}}
            <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
        {{/if}}
    {{/for}}
    {{if names.length>6}}
        </ul>
        </li>
    {{/if}}
</ul>

Примечание о #data:

Любое выражение с #data может быть упрощено, поскольку #data является текущим контекстом данных по умолчанию. Ты можешь написать

<ul>
    {{for #data}}
        ...
    {{/for}}
    {{if #data.length>6}}
        ...
    {{/if}}
</ul>

как

<ul>
    {{for}} {{!-- in this case #data is an array so this iterates over the array--}}
        ...
    {{/for}}
    {{if length>6}}
        ...
    {{/if}}
</ul>

Весь шаблон может быть написан так:

<ul>
  {{for slice(0, 7)}}
    <li>{{>name}}</li>
  {{/for}}
  {{if length>6}}
    <li><b>More:</b>
      <ul>
        {{for slice(7)}}
          <li>{{>name}}</li>
        {{/for}}
      </ul>
    </li>
  {{/if}}
</ul>

Здесь есть пример запуска http://jsfiddle.net/BorisMoore/x0h9drr0/