Во-первых, JSON Template это не JSON.
Во-вторых, если у Вас нет представления о том чем является JSON или как он выглядит, посмотреть лучше здесь.
Секции и Повторяющиеся секции
Секции выполняют большую часть работы в JSON Template. Есть всего две важные идеи, которые мы должны знать о секциях:
- Содержимое секции отображается только если секция существует.
- Секция определяет область видимости, являясь корневым разделом для любых, добавленных в нее, данных.
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}Зарубежные источники? — "Да". Информация никогда не публиковалась на хабре? — «Да». Продолжение будет? — «Да».
Автор: onbillion
