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

еще один отличный вариант для этого-использовать 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 будет автоматически компилировать все *.руль файлы в ваш руль-шаблоны.js файл.

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

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

подготовка

мы просто предположим, что все переменные шаблона в переменную context:

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

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

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

каталог структуру:

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

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

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

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>

визуализация шаблонов с помощью глобального

предварительная компиляция шаблонов рулей с помощью Grunt

если у вас есть узел.Яш установлены. Если нет, иди и сделай это.

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

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

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

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

2) Установка Зависимостей Узла:

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

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

и установить зависимости, перечисленные в пакете.json:

npm install

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

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

In ваш корневой каталог проектов, создайте файл с именем 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) Настройка по своему вкусу:

если вы не используете 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 компилировал 3rd Party шаблоны в приложениях скомпилированных шаблонов. Если вы включаете весь свой собственный код в ./src,./js,./app вам будет хорошо.

5) компиляция шаблонов с ворчанием:

чтобы запустить grunt в фоновом режиме, откройте терминал и cd в корневой каталог проекта и выполните команду:grunt watch:handlebars (всего grunt watch работает так же). При запуске grunt в фоновом режиме все изменения в файлах шаблонов будут автоматически скомпилированы и выходной файл указан 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.

для руля 2.0.0 Альфа обновление:

@Macro объяснил довольно ясно, как это работает с 1 кусок шаблона, пожалуйста, смотрите этот ответ для того, как сделать руль.Яш работает

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

эта ошибка произошла в " handlebar.во время выполнения.JS " строка 436 при оценке templateSpec.вызов (контейнер, руль, контекст, параметры.помощники, варианты.частичный, опции.данные),

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

пожалуйста, проверьте его с помощью

handlebars any_your_template_before_compile.handlebars | grep "compiler"

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

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

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

Handlebars.COMPILER_REVISION

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

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

npm install handlebars@1.3.0 -g

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

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

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

во-первых экстернализировать каждую часть ваших скрепленных шаблонов: событие.руль, деталь.рули и т. д... Вы можете поместить их все в одну папку, скажем "/шаблоны"

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

handlebars *.handlebars -f templates.js

и включить руль.runtime, этот файл в вашем HTML

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

в шаблоны будут вводиться в руль.шаблоны по их названию. Например, событие.до руля можно добраться с помощью руля.задании['событие'].