Теперь вы можете вставлять библиотеки 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];}}"
  }]
}

Это было очень полезно, но мы можем сделать лучше. Вот некоторые из проблем:

  1. Это может очень быстро стать беспорядочным, поскольку формат JSON не поддерживает многострочные строки.
  2. Это позволяет вам оценивать только встроенные выражения 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.

Вот как это работает:

  1. Импортируйте любой скрипт с помощью $script.include
  2. Это добавит код JavaScript в $root контекст механизма шаблонов.
  3. Просто используйте его, открыв его с $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])}}"
    }
  }
}

Это еще не все. Вы можете:

  1. Включите несколько файлов JavaScript параллельно
  2. Используйте протокол file:// для доступа к локальным файлам JavaScript (узнайте, как загружать из локальных файлов здесь: http://docs.jasonette.com/offline/#1-loading-from-local-file)
  3. Используйте атрибут 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&#39;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

  1. Действие $script позволяет использовать служебные библиотеки JavaScript, такие как underscore.js, moment.js, crypto.js и т. Д., Поэтому вам не нужно писать сложный JavaScript для обработки данных. код внутри шаблона.
  2. Также он позволяет вам написать свою собственную функцию 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. Попробуйте и поделитесь на форуме, если у вас возникнут проблемы.

Подробнее об этой функции вы можете узнать здесь.