Как стать автором
Поиск
Написать публикацию
Обновить

JSON Template: можно просто JSONT

Время на прочтение7 мин
Количество просмотров22K
Веб-разработка*
Из песочницы
Во-первых, 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}

Зарубежные источники? — "Да". Информация никогда не публиковалась на хабре? — «Да». Продолжение будет? — «Да».
Теги:
Хабы:
Всего голосов 32: ↑14 и ↓18-4
Комментарии8
3
Карма
0
Рейтинг
headofrussia @onbillion

Technology Evangelist, Advisor

Отправить сообщение

Публикации

Ближайшие события

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2025, Habr