[Из песочницы] JSON Template: можно просто JSONT

Во-первых, JSON Template это не JSON.

Во-вторых, если у Вас нет представления о том чем является JSON или как он выглядит, посмотреть лучше здесь.

Секции и Повторяющиеся секции

Секции выполняют большую часть работы в JSON Template. Есть всего две важные идеи, которые мы должны знать о секциях:

1. Содержимое секции отображается только если секция существует.


2. Секция определяет область видимости, являясь корневым разделом для любых, добавленных в нее, данных.

Cекция

{.section item} If this section exists, display this {.end}

Повторяющаяся секция

{.repeated section items}
  If there are any items, repeat this info for each item
{.end}

Секция с альтернативой

{.repeated section items}
  This stuff shows for each item.
{.alternates with}
  ------ *show this dashed line in between each item*
{.end}

Инструкция or

Может использоваться в секциях и повторяющихся секциях. Применяется для отображения недопустимого состояния, например если раздел не существует:

{.section item}
  Item exists!
{.or}
  Item does not exist :(
{.end}

---

Теги

Теги используется для внедрения данных из JSON в наш файл.

{title}

Мы можем следовать структуре JSON, используя точечную нотацию:

{item.author.displayName}

---

Ссылочный индекс (@)

@ несет в себе ссылку на элемент находящийся в области видимости — как 'this' в JavaScript

Обычно это используется чтобы отобразить HTML-код, в том случае если есть что отобразить.

Давайте взглянем на следующий пример:

<div class="title">{title}</div>

В данном случае, если {title} не существует, в HTML будет записан пустой DIV:

<div class="title"></div>

Чтобы избежать этого, инструкция может быть записана следующим образом:

{.section title}<div>{@}</div>{.end}

В результате, если названия нет, в HTML ничего не запишется.

---

Миниатюра

Обычно, каждый элементы коллекции (например: блога) имеет соответствующее ему изображение.

Миниатюра привязана к публикации через URL данного поста, так что получить к ней доступ давольно легко:

Каждое изображение можно получить с несколькими вариантами ширины:

original, 1500w, 1000w, 750w, 500w, 300w, 100w

Существует также специальный тест на наличие у элемента коллекции, связанного с ней изображения. Это нужно чтобы не оказаться с пустым тегом в HTML.

{.main-image?}{.end}

Например:

{.main-image?}<img src="" />{.end}

Если шаблон ожидает наличие основного изображения, вне зависимости от того загружено оно или нет, можно воспользоваться инструкцией or:

{.main-image?}
  <img src="" />
{.or}
  <img src="[fallback-img-URL]" />
{.end}

---

Множественное число

Добавляет к слову окончание «S», если значение> 1

You have {num} message{num|pluralize}.

Добавляет к слову окончание «ES», если значение> 1

They suffered {num} loss{num|pluralize es}.

Облегчает связь между существительным и глаголом

There {num|pluralize is are} {num} song{num|pluralize}.

Свой вариант (первое значение присваивается, если значение = 1, второе, если значение > 1)

{num-people|pluralize/It depends/They depend} on {num-things} thing{num-things|pluralize}.

Пример посложнее:

{.repeated section num}

  {.plural?}
    There are {@} people here.
  {.or singular?}
    There is one person here.
  {.or}
    There is nobody here.
  {.end}

{.end}

---

Форматирование данных

Дата и время

Форматирование даты возможно в соответствии с форматом даты в YUI

{addedOn|date %A, %B %d}

Или в стиле твиттера

{addedOn|timesince}

Формат строки

html – пропускает html-теги (, &)

{[string]|html}

htmltag – пропускает html-теги и кавычки (, &, "")

{[string]|htmltag}

slugify – преобразует текст в нижний регистр, удаляет все, кроме буквенно-цифровых символов и символов подчеркивания, преобразует пробелы в дефис.

{[string]|slugify}

smartypants — переводит простые символы пунктуации ASCII в «умные» типографские знаки препинания HTML (Источник: http://daringfireball.net/projects/smartypants/)

{[string]|smartypants}

---

Предикаты

Это серия специфичных дополнений от Squarespace для JSON Template. Тесты для адаптации кода к конкретным ситуациям. Сервис Squarespace очень вдохновляющая штука, я напишу о ней в следующей статье. Именно при знакомстве с девелоперской частью их продукта нам и потребуются знания в JSON Template.

Все предикаты работают как этот:

{.predicate-name?}
  code if the predicate test returns true
{.or}
  code if it the test is not true
{.end}

Широко используемые предикаты:

Имеет ли элемент коллекции (или сама коллекция) изображение (миниатюру)?

{.main-image?}

Имеет ли элемент коллекции описание?

{.excerpt?}

Имеет ли элемент коллекции комментарии?

{.comments?}

Имеет ли элемент коллекции комментарии Disqus?

{.disqus?}

Предикаты стандартных блоков Squarespase

Имеет ли элемент конкретный тип блока?

{.promote[blockName]?}

Доступные [blockName] тесты (заменте [blockName] на один из приведенных ниже типов):

map, embed, image, code, quote, twitter, link, video, foursquare, instagram, form

Предикаты навигационных шаблонов

Является ли данный навигационный пункт внешней ссылкой?

{.external-link?}

Является ли данный навигационный пункт папкой?

{.folder?}

Другие предикаты

Имеет ли данный элемент коллекции информацию о местоположении?

{.location?}

Является ли данный элемент коллекции событием (Event)?

{.event?}

---

Продвинутый JSONT

Константы

Добавить безсимвольный пробел:

{.space}

Добавить табуляцию:

{.tab}

Добавить перенос строки (/n):

{.newline}

Добавить мета-данные:

{.meta-left} and {.meta-right}

Комментирование кода JSONT

Hello {# Comment} There

Настройка мета-данных

<%.meta-left%>Hello<%.meta-right%> = HTML: <%Hello%>.

Включения (или что-то вроде включений)

Можно использовать форматирование чтобы загружать шаблоны, которые используют данные в пределах определенной переменной форматирования. Включение начинается с '%' и загружает файлы шаблона.

{owner|%user-profile.jsont}

Оператор if (расширение)

Создает секцию, которая отображается если 'if' возвращает истину (truthy conditions = true || has-value). Примечание: не ограничивать область видимости.

{.if property.nestedProperty} Hello World {.end}

Вы можете использовать оператор {.or} для обработки неудавшихся тестов.

Отладка

{.Debug?}Rendered in 3 seconds{.end} { "debug" : true|false }

---

Хоть я и отослал Вас в начале к посту JSON и XML. Что лучше?, все же приведу пример кода JSON и здесь.

Приятный JSON

{
  "widget" : 
  { 

     "widget-title" : "Navigation",
     "widget-id" : 1452345,
     "widget-type" : "nav",
     "base-url" : "http://joshkill.com",
     "items" : [
      {
         "title" : "Home",
        "description" : "Home is where the heart is",
        "icon" : "btn-home.png",
        "url" : "home.html"
      },
      {
        "title" : "Services",
        "description" : "We do it all, then some",
        "icon" : "btn-services.png",
        "url" : "services.html"
      },
      {
        "title" : "Contact",
        "description" : "Let's work together!",
        "icon" : "btn-contact.png",
        "url" : "contact.html"
      }
    ]
  }
}

Уродливый JSON (в строчку)

{ "widget" : { "widget-title" : "Navigation", "widget-id" : 1452345, "widget-type" : "nav", "base-url" : "http://joshkill.com", "items" : [ { "title" : "Home", "description" : "Home is where the heart is", "icon" : "btn-home.png", "url" : "home.html" }, { "title" : "Services", "description" : "We do it all, then some", "icon" : "btn-services.png", "url" : "services.html" }, { "title" : "Contact", "description" : "Let's work together!", "icon" : "btn-contact.png", "url" : "contact.html" } ] }}

---

Область видимости

Я попытаюсь рассказать об области видимости, это простая концепция.

Наиболее наглядным примером определения области видимости является структура папок на компьютере при попытке найти файл. В JSON, переменная, которая содержит другие переменные похожа на папку компьютера. При нажатии в любую папку, у нас есть доступ к файлам внутри. Аналогичным образом, когда переменная в JSON находится в области видимости, у нас есть прямой доступ к другим переменных внутри.

Рассмотрим следующий пример JSON:

{ 
    "items": [
      {
        "fullUrl": "/notebook/a-post-a-post",
        "title": "A Post! A Post!",
        "data": {
            "commentCount": 0,
            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi tincid boblong sipe..."
           }
      },
      {
        "fullUrl": "/notebook/blog-ideas",
        "title": "Blog Ideas",
        "data": {
            "commentCount": 0,
            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt aliquam tortor eu volutpat. Sed sem mauris, faucibus a hendrerit non, vulputate non dolor. Morbi fermentum tortor et lectus ultrices vulputate. Morbi rhoncus faucibus diam ..."
           }
      }
    ]
}

Переменная «items» содержит другие переменные. И внутри «items», переменная «data» тоже содержит другие переменные. О них вполне можно думать о как о папках.

Когда мы используем секцию JSON, эффект тот же что и при открытии папки на компьютере, у вас есть прямой доступ к файлам внутри.

Окей, теперь давайте посмотрим области видимости JSON Template в действии:

Пример

Если мы хотим добавить «body» для каждого элемента, можно написать так:

{.repeated section items} 
  {data.body} 
{.end}

Или мы могли бы поместить переменные в область видимости «data»:

{.repeated section items} 
  {.section data}
    {body}
  {.end}
{.end}

Нам может быть доступно «body» повсюду, просто используем указатель "@" для доступа к переменной «body»:

{.repeated section items} 
  {.section data}
    {.section body}
      {@}
    {.end}
  {.end}
{.end}

Зарубежные источники? — "Да". Информация никогда не публиковалась на хабре? — «Да». Продолжение будет? — «Да».

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.