Теперь вы можете вставлять библиотеки JavaScript в шаблоны JSON.
Jasonette имеет мощный встроенный механизм шаблонов на стороне клиента, который использует широко используемую нотацию {{ }}
. Это выглядит так:
{ "items": [{ "type": "image", "url": "{{$jason.image}}" }, { "type": "label", "text": "{{$jason.username}}" }] }
Помимо очевидных функций шаблонов, таких как #if
, #each
и т. Д., Шаблон позволяет вам даже использовать полноценные выражения JavaScript:
{ "items": [{ "type": "label", "url": "Reversed Fullname" }, { "type": "label", "text": "{{var sorted_posts = $jason.posts.sort(function(a,b){ return new Date(b.created_at) - new Date(a.created_at); }); return sorted_posts[0];}}" }] }
Это было очень полезно, но мы можем сделать лучше. Вот некоторые из проблем:
- Это может очень быстро стать беспорядочным, поскольку формат JSON не поддерживает многострочные строки.
- Это позволяет вам оценивать только встроенные выражения JavaScript. Например, вы не можете импортировать внешнюю библиотеку JavaScript.
Встречайте действие $ script.
В последней версии Jasonette добавлено новое действие: $script.include
.
Лучший способ объяснить это - использовать аналогию. Вы знаете, как можно использовать <script src="..."></script>
код для включения удаленного кода JavaScript в ваш HTML-файл?
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> </head> <body> ... </body> </html>
Это то, что делает $script.include
action, но для Jasonette, что означает, что он импортирует код JavaScript в JSON.
Вот как это работает:
- Импортируйте любой скрипт с помощью
$script.include
- Это добавит код JavaScript в
$root
контекст механизма шаблонов. - Просто используйте его, открыв его с
$root
.
В приведенном ниже примере мы импортируем Underscore.js и используем его, открывая $root._
. (Глобальная переменная _
привязана к $root
контексту)
{ "type": "$script.include", "options": { "items": [{ "url": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" }] }, "success": { "type": "$util.alert", "options": { "title": "Find only unique items", "description": "{{$root._.uniq([1,2,3,3,3,4,4,4,4,5])}}" } } }
Это еще не все. Вы можете:
- Включите несколько файлов JavaScript параллельно
- Используйте протокол
file://
для доступа к локальным файлам JavaScript (узнайте, как загружать из локальных файлов здесь: http://docs.jasonette.com/offline/#1-loading-from-local-file) - Используйте атрибут
text
вместо атрибутаurl
, чтобы вставить встроенный скрипт в контекст вместо загрузки откуда-то.
Вот пример:
{
"type": "$script.include",
"options": {
"items": [
{ "url": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" },
{ "text": "var randomcolor = function() { return '#'+Math.floor(Math.random()*16777215).toString(16); }" },
{ "url": "https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js" },
{ "url": "https://rawgit.com/mathiasbynens/he/master/he.js" }
]
},
"success": {
"type": "$render",
"options": {
"data": {
"decoded": "{{$root.he.decode('no man's land')}}",
"unique": "{{$root._.uniq([1,2,3,3,3,4,4,4,4,5])}}",
"color": "{{$root.randomcolor()}}"
}
}
}
}
Что делает $ script и чего не делает.
Каждый раз, когда выходит новый выпуск Jasonette, включающий некоторые существующие веб-технологии, такие как веб-контейнер, люди, кажется, неправильно понимают, что Jasonette использует подход веб-просмотра для создания приложений.
Этого нет и никогда не будет. Jasonette занимается созданием собственных приложений с использованием собственных API-интерфейсов.
Поэтому важно понимать, что это $script
действие приносит пользу, а что нет.
Что делает $ script
- Действие
$script
позволяет использовать служебные библиотеки JavaScript, такие как underscore.js, moment.js, crypto.js и т. Д., Поэтому вам не нужно писать сложный JavaScript для обработки данных. код внутри шаблона. - Также он позволяет вам написать свою собственную функцию JavaScript и повторно использовать ее в разных местах. Давайте посмотрим на функцию
randomcolor()
из приведенного выше примера:
{
"$load": {
"type": "$script.include",
"options": {
"items": [
{ "text": "var randomcolor = function() { return '#'+Math.floor(Math.random()*16777215).toString(16); }" },
]
},
"success": {
"trigger": "random"
}
},
"random": {
"type": "$util.alert",
"options": {
"title": "Random color",
"description": "Generated a color: {{$root.randomcolor()}}"
}
}
}
Здесь мы использовали атрибут text
для определения глобальной функции с именем randomcolor
. Это зарегистрировано под $root.randomcolor
.
Затем мы можем вызывать его столько раз, сколько захотим, без необходимости переписывать функцию.
Что не делает $ script
Однако это не для написания веб-приложений. Действие $script
не позволяет писать веб-приложения поверх Jasonette. Как уже упоминалось, Jasonette предназначен для создания полностью нативных приложений.
Это означает, что действие $script
НЕ предназначено для библиотек JavaScript, таких как D3, чья работа заключается в рисовании материалов в браузере.
Заключение
Как только вы поймете преимущества, вы сможете использовать эту новую функцию разными способами.
На сегодняшний день эта функция доступна во всех ветках, как для iOS, так и Android. Попробуйте и поделитесь на форуме, если у вас возникнут проблемы.
Подробнее об этой функции вы можете узнать здесь.