Использование предварительно скомпилированных шаблонов с Handlebars.js(среда jQuery Mobile)

Ответ 1

Итак, после долгих проб и ошибок (это лучший способ узнать это) здесь, как это работает для меня.

Сначала вырезайте все свои шаблоны, скажем, у вас есть шаблон внутри тегов script, например

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</p></div>    
    {{/unless}}
</script>

Создайте новый файл с именем events.tmpl и скопируйте/вставьте в него шаблон. Обязательно удалите сами элементы script, это запустило меня в a..

Установите командную строку Handlebars script следующим образом

npm install -g handlebars

перейдите в папку, в которую вы сохранили events.tmpl и запустите

handlebars events.tmpl -f events.tmpl.js

Включите скомпилированный javascript в свой HTML после того, как вы включили Handlebars.js

<script src="events.tmpl.js"></script>

Теперь все, что осталось, изменит ваш обычный шаблонный код на что-то похожее на следующие

var template = Handlebars.templates['events.tmpl'], // your template minus the .js
    context = events.all(), // your data
    html    = template(context);

И у вас есть это, супер быстрые предварительно скомпилированные шаблоны Handlebars.

Ответ 2

Еще один отличный вариант - использовать GruntJS. После установки:

npm install grunt-contrib-handlebars --save-dev

Затем внутри вашего файла gruntfile.js

grunt.initConfig({
    dirs: {
      handlebars: 'app/handlebars'
    },
    watch: {
      handlebars: {
        files: ['<%= handlebars.compile.src %>'],
        tasks: ['handlebars:compile']
      }
    },
    handlebars: {
      compile: {
        src: '<%= dirs.handlebars %>/*.handlebars',
        dest: '<%= dirs.handlebars %>/handlebars-templates.js'
      }
    }
});


grunt.loadNpmTasks('grunt-contrib-handlebars');

Затем вы просто набираете grunt watch со своей консоли, и grunt автоматически компилирует все файлы *.handlebars в ваш файл handlebars-templates.js.

Действительно рад работать с рулями.

Ответ 3

Вот как я это делаю:

Подготовка

Предположим, что все ваши переменные шаблона находятся в переменной с именем context:

var context = {
    name: "Test Person",
    ...
};

Где разместить ваши шаблоны

Создайте каталог, содержащий все ваши шаблоны (назовем его templates/) Добавьте сюда свои шаблоны, называемые filename.handlebars.

Структура вашего каталога:

.
└── templates
    ├── another_template.handlebars
    └── my_template.handelbars

Компиляция ваших шаблонов

Сначала перейдите в корневой каталог, затем скомпилируйте свои шаблоны с помощью программы CLI npm:

handlebars templates/*.handlebars -f compiled.js

Новая структура каталогов:

.
├── compiled.js
└── templates
    ├── another_template.handlebars
    └── my_template.handlebars

Использование

Включите compiled.js на странице HTML после включения среды выполнения:

<script src="handlebars.runtime.js"></script>
<script src="compiled.js"></script>

Извлеките свои шаблоны с помощью глобального объекта Handlebars:

// If you used JavaScript object property conform file names
// Original filename: "my_template.handlebars"
Handlebars.templates.my_template(context)

// if you used special characters which are not allowed in JavaScript properties
// Original filename: "my-template.handlebars"
Handlebars.templates["my-template"](context)

Примечания

Обратите внимание на расширение файла .handlebars. Он автоматически разделяется при компиляции шаблонов.

Дополнительно: если вы используете одну из IDE с Jetbrains вместе с плагином Handlebars/Mustache, вы даже получаете довольно хорошую поддержку редактора.

Ответ 4

Предварительные компиляции шаблонов ручек с грантом

Предположим, что у вас установлен Node.js. Если вы этого не сделаете, сделайте это.

1) Настройка зависимостей Node:

В ваших корневых каталогах приложений добавьте файл с именем package.json. Вставьте следующее в этот файл:

{
  "devDependencies": {
   "grunt-contrib-handlebars": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "handlebars": "~1.3.0"
  },
}

Этот файл JSON сообщает Node, какие пакеты ему нужно установить. Это помогает ускорить работу других разработчиков, как вы увидите на следующем шаге.

2) Установка Node Зависимости:

В вашем терминале/командной строке /powershell, cd в корневой каталог проектов и выполните следующие команды:

npm install grunt -g
npm install grunt-cli -g

И для установки зависимостей, перечисленных в вашем пакете. json:

npm install

Теперь вы установили все необходимые зависимости Node. В корневом каталоге ваших проектов вы увидите node_modules folder.

3) Настройка Grunt:

В корневом каталоге проектов создайте файл с именем Gruntfile.js. Вставьте следующее в этот файл:

module.exports = function(grunt) {

    var TEMPLATES_LOCATION        = "./src/templates/",       // don't forget the trailing /
        TEMPLATES_EXTENSION       = ".hbs",
        TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION,       // don't forget the trailing /
        TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js";  // don't forget the .js

    grunt.initConfig({
        watch: {
            handlebars: {
                files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
                tasks: ['handlebars:compile']
            }
        },
        handlebars: {
            compile: {
                src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
                dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
                options: {
                    amd: true,
                    namespace: "templates"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-contrib-watch');

}

4) Настройка на ваш Liking:

Если вы не используете Require.js, вам нужно изменить handlebars.compile.options.amd на false. Вы также можете настроить параметр namespace по своему усмотрению. Если вы используете модули require/amd, свойство namespace не имеет значения (по умолчанию это "JST", если вы его удаляете).

Поскольку все структуры проекта немного отличаются друг от друга, вам нужно немного настроить Gruntfile. Измените константы TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME в соответствии с вашим проектом.

Если ваши шаблоны разбросаны по всему вашему приложению, вы захотите изменить TEMPLATES_LOCATION на самый нижний каталог. Убедитесь, что ваши шаблоны изолированы от ваших node_modules, bower_components или любых других сторонних каталогов, потому что вы не хотите, чтобы Grunt компилировал сторонние шаблоны в ваши скомпилированные шаблоны приложений. Если вы включите весь свой код в каталог ./src, ./js, ./app, все будет в порядке.

5) Компиляция шаблонов с помощью Grunt:

Чтобы запустить grunt в фоновом режиме, откройте свой терминал и cd в корневой каталог проектов и запустите команду: grunt watch:handlebars (работает только grunt watch). С запуском в фоновом режиме все изменения в файлах шаблонов будут автоматически скомпилированы, а выходной файл, указанный handlebars.compile.dest, будет переписан по мере необходимости. Результат будет выглядеть примерно так:

Running "watch" task
Waiting...

Для запуска задачи компиляции откройте свой терминал и cd в корневой каталог проектов и выполните команду: grunt handlebars:compile (просто работает grunt:handlebars). Результат будет выглядеть примерно так:

Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.

Done, without errors.

Ответ 5

Для Handlebars 2.0.0 alpha Update:

@Macro достаточно четко объяснила, как это работает с 1 частью шаблона, см. этот ответ для того, как сделать работу handlebars.js

Если вы видите, что "TypeError:" undefined "не является функцией" при использовании предварительно скомпилированных шаблонов:

Эта ошибка произошла на строке 4336 "handlebar.runtime.js" при evaluting templateSpec.call(контейнер, Handlebars, context, options.helpers, options.partials, options.data),

потому что установленный компилятор npm не соответствует той, которая используется браузером. Последняя версия стабильной версии - v1.3.0, а если вы используете npm install handlebars, она установит для вас 2.0.0-alpha4.

Пожалуйста, проверьте его, используя

handlebars any_your_template_before_compile.handlebars | grep "compiler"

который вам понравится, если вы действительно установили handlebar 2.0.0-alpha4:

this.compiler = [5, '>=2.0.0']

С первым номером стоит версия для вашего компилятора руля. Введите следующий код в консоли браузера, посмотрите, соответствует ли результат версии.

Handlebars.COMPILER_REVISION

Если у вас есть компилятор 5 с браузером revison 4, у вас возникнет вышеуказанная проблема.

Чтобы исправить это, установите handlebar 1.3.0 со следующей командой

npm install [email protected] -g

Затем попробуйте снова скомпилировать его, вы увидите это время, оно даст вам соответствующую информацию о версии, и вы можете пойти с предварительно скомпилированными шаблонами.

this.compilerInfo = [4, '>=1.0.0']

Просто объясните, есть ли у вас тонны шаблонов:

Во-первых, вытесняйте каждый фрагмент ваших шаблонов: event.handlebars, item.handlebars и т.д. Вы можете поместить их все в одну папку, скажем "/templates"

Скомпилируйте все файлы и соедините их в 1 файл с помощью следующей команды:

handlebars *.handlebars -f templates.js

И включите handlebars.runtime, этот файл в вашем HTML

<script src="/lib/handlebars.runtime.js"></script>
<script src="templates.js"></script>

Шаблоны будут введены в Handlebars.templates по их имени. Например, доступ к event.handlebars можно получить с помощью Handlebars.tempaltes ['event'].