условный цикл в mustache.js - PullRequest
Новая
       4

условный цикл в mustache.js

8 голосов
/ 01 февраля 2012

Как вывести <hr> после каждой итерации, кроме последней с mustache.js.Я попробовал javascript для цикла, но не смог избавиться от последнего <hr>.(Некоторые люди предлагают использовать handlebars.js, но я бы хотел остаться с усами.)

Вот мой json (список увеличивается с увеличением числа сотрудников) 

    {
      employees: [
        {firstName: "John", lastName: "Smith"},
        {firstName: "John", lastName: "Doe"},
        {firstName: "Jane", lastName: "Doe"}    
       ]
    }

Я хочу этовывод html: 

John Smith
<hr>
John Doe
<hr>
Jane Doe

Ответы [ 2 ]

22 голосов
/ 01 февраля 2012

Взглянув на Руководство по усам , вы захотите использовать так называемые «перевернутые секции». Из руководства:

Перевернутая секция начинается с каретки (шляпы) и заканчивается косой чертой. То есть {{^ person}} начинает инвертированный раздел {{/ person}} заканчивает это.

Хотя разделы могут использоваться для визуализации текста один или несколько раз на основе значение ключа, перевернутые секции могут отображать текст один раз на основе обратное значение ключа. То есть они будут отображены, если ключ не существует, имеет значение false или является пустым списком.

Чтобы использовать это, вы можете добавить дополнительный атрибут к последнему сотруднику, чтобы отличить его.

JSON: 

{
  "employees": [
    {"firstName": "John", "lastName": "Smith"},
    {"firstName": "John", "lastName": "Doe"},
    {"firstName": "Jane", "lastName": "Doe", "last": true}    
   ]
}

Усы Шаблон: 

{{#employees}}
  {{firstName}} {{lastName}}
  {{^last}}
    <hr />
  {{/last}}
{{/employees}}

Это очень похоже на демонстрацию Mustache , в которой используется атрибут «first» первого объекта в массиве цветов.

10 голосов
/ 01 февраля 2012

Если цель <hr/> исключительно для стиля, почему бы не использовать селектор CSS, такой как :not(:last-child)?

JavaScript: 

var tpl = "<ul>{{#employees}}<li>{{firstName}} {{lastName}}</li>{{/employees}}</ul>",
        data = {
  "employees": [
    {"firstName": "John", "lastName": "Smith"},
    {"firstName": "John", "lastName": "Doe"},
    {"firstName": "Jane", "lastName": "Doe", "last": true}    
   ]
},
    html = Mustache.to_html(tpl, data);

document.write(html);

CSS: 

li:not(:last-child) {
    border-bottom: 1px solid blue;
}

Вот рабочий jsFiddle, чтобы увидеть его в действии

...