Korzystanie z gotowych szablonów z kierownicą.js (jQuery Mobile environment)

Kolejną świetną opcją jest użycie GruntJS . Po zainstalowaniu:

Npm install grunt-contrib-handlebars --save-dev

Potem w Twoim 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');

Następnie po prostu wpisz grunt watch z konsoli, a grunt automatycznie skompiluje wszystkie *.pliki na kierownicy-szablony.plik js.

Oto Jak to robię:

Przygotowanie

Zakładamy, że wszystkie zmienne szablonu są w zmiennej o nazwie context:

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

Gdzie umieścić swoje szablony

Utwórz katalog zawierający wszystkie szablony (nazwiemy go templates/) Dodaj tutaj swoje szablony o nazwie filename.handlebars.

Twoja struktura katalogów:

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

Kompilowanie szablonów

Najpierw przejdź do katalogu głównego, a następnie skompiluj szablony za pomocą npm CLI program:

handlebars templates/*.handlebars -f compiled.js

Nowa struktura katalogów:

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

Użycie

Dołącz compiled.js do strony HTML po dodaniu runtime:

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

Renderuj swoje szablony używając globalnego Handlebars obiektu:

// 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)

Uwagi

Zwróć uwagę na rozszerzenie pliku .handlebars. Jest on automatycznie usuwany podczas kompilacji szablonów.

Extra: jeśli używasz jednego z Idów Jetbrains razem z wtyczkąKierownica/wąsy , możesz uzyskaj nawet całkiem dobrą obsługę edytora.

Precompilowanie szablonów kierownicy z gruntem

Zakładając, że masz węzeł.js zainstalowany. Jeśli nie, zrób to.

1) Ustawianie zależności węzłów:

W katalogu głównym aplikacji Dodaj plik o nazwie package.json. Wklej do tego pliku:

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

Ten plik JSON informuje węzeł o pakietach, które musi zainstalować. Pomaga to innym programistom bardzo szybko rozpocząć pracę, co zobaczysz w następnym kroku.

2) Instalacja Węzła Zależności:

W terminalu / wierszu poleceń / powershell, cd w głównym katalogu projektów i uruchom następujące polecenia:

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

I aby zainstalować zależności wymienione w pakiecie.json:

npm install

Teraz zainstalowałeś wszystkie potrzebne zależności węzłów. W głównym katalogu projektów zobaczysz node_modules folder.

3) Konfigurowanie Grunt:

W katalogu głównym projektu Utwórz plik o nazwie Gruntfile.js. Wklej poniższy tekst do plik:

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) Konfigurowanie do własnych upodobań:

Jeśli nie używasz Wymagaj.js, będziesz chciał zmienić handlebars.compile.options.amd na false. Możesz również dostosować opcję namespace do swoich upodobań. Jeśli używasz modułów require/amd, właściwość przestrzeni nazw jest nieistotna(domyślnie jest to "JST", jeśli ją usuniesz).

Ponieważ wszystkie struktury projektu są trochę inne, musisz trochę skonfigurować plik gruntowy. Modyfikuj stałe TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME aby dopasować się do twojego projektu.

Jeśli szablony są rozrzucone po całej aplikacji, będziesz chciał zmienić TEMPLATES_LOCATION na najniższy możliwy katalog. Upewnij się, że szablony są odizolowane od twoich node_modules, bower_components lub innych katalogów firm trzecich, ponieważ nie chcesz, aby Grunt kompilował szablony firm trzecich do skompilowanych szablonów aplikacji. Jeśli umieścisz cały własny kod w ./src, ./js, ./app katalog, będziesz ok.

5) Kompilowanie szablonów z gruntem:

Aby uruchomić grunt w tle, otwórz terminal i cd w głównym katalogu projektów i uruchom polecenie: grunt watch:handlebars (działa również grunt watch). Gdy grunt działa w tle, wszystkie zmiany w plikach szablonów zostaną automatycznie skompilowane, a plik wyjściowy określony {24]} zostanie przepisany w razie potrzeby. Wynik będzie wyglądał mniej więcej tak:

Running "watch" task
Waiting...

Aby uruchomić zadanie kompilacji samodzielnie, otwórz terminal i cd do głównego katalogu projektów i uruchom polecenie: grunt handlebars:compile (działa również grunt:handlebars). Wynik będzie wyglądał mniej więcej tak:

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

Done, without errors.

Dla kierownicy 2.0.0 alpha Update:

@Macro wyjaśnił dość jasno, jak to działa z 1 kawałkiem szablonu, zobacz ta odpowiedź, jak zrobić kierownicę.js works

Jeśli widzisz "TypeError:' undefined 'is not a function" podczas używania wstępnie skompilowanych szablonów:

Ten błąd wystąpił w " kierownica.runtime.js " linia 436 przy ewaluacji templateSpec.call(container, Handlebars, context, options.pomocnicy, opcje.częściowe, opcje.dane),

Ponieważ zainstalowany kompilator npm nie pasuje do tego używanego przez przeglądarkę. Najnowsza stabilna wersja pobrana jest v1. 3. 0, podczas gdy jeśli używasz npm install handlebars, zainstaluje 2.0.0-alpha4 dla Ciebie.

Proszę sprawdzić to używając

handlebars any_your_template_before_compile.handlebars | grep "compiler"

Który da Ci jak, jeśli rzeczywiście zainstalowałeś kierownicę 2.0.0-alpha4:

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

Z numerem pierwszym oznacza wersję dla Twojego kompilatora kierownicy. Wpisz poniższy kod w konsoli przeglądarki, sprawdź czy wynik pasuje do wersji.

Handlebars.COMPILER_REVISION

Jeśli masz kompilator 5 z przeglądarką revison 4, wtedy będziesz miał powyższy problem.

Aby to naprawić, zainstaluj kierownicę 1.3.0 za pomocą następującego polecenia

npm install [email protected] -g

Następnie spróbuj skompilować go ponownie, zobaczysz, że tym razem, to daje pasujące informacje o wersji i jesteś dobry, aby przejść z wstępnie skompilowanych szablonów.

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

Po prostu wyjaśnij, jeśli masz mnóstwo szablonów:

Najpierw uzewnętrznić każdy element Twoich szablonów: event.kierownica, item.kierownice itp... Możesz umieścić je wszystkie w jednym folderze, powiedzmy "/templates"

Skompiluj wszystkie pliki i połącz je w 1 plik za pomocą następującego polecenia:

handlebars *.handlebars -f templates.js

I obejmują kierownicę.runtime, ten plik w Twoim HTML

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

Szablony zostaną wstrzyknięte do kierownicy.szablony według ich nazwy. Na przykład zdarzenie.do kierownicy można dostać się za pomocą kierownicy.tempaltes ["wydarzenie"].