web-dev-qa-db-ja.com

Handlebars.jsでプリコンパイルされたテンプレートを使用する（jQuery Mobile環境）

Handlebarsのテンプレートのプリコンパイルに多少苦労しています。私のjQuery Mobileプロジェクトは、テンプレート単位でかなり大きくなっています。使用するテンプレートをプリコンパイルしたいと思います。

ただし、ハンドルバーを使用してこれを行う方法についての適切な説明（ステップバイステップのチュートリアルなど）を見つけることができないようです。

スクリプトタグを使用して、すべてのテンプレートをインラインで保持しています。 NPMを使用してハンドルバーをインストールしました。しかし今、私は進む方法にちょっと迷いました。

私は次のようなことをしていると推測しています

handlebars -s event.handlebars > event.compiled

そして、どういうわけかevent.compiledコンテンツを含む？しかし、その後、それを呼び出す方法。

私は自分のテンプレートをそう呼んでいます

var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html    = template(context);

誰かが私のためにこれにいくらか光を当てることができることを願っています。

javascriptjquery-mobilehandlebars.js
67
Marco

だから、多くの試行錯誤の後（これを学ぶための最良の方法です）、ここで私のために働く方法です。

まず、すべてのテンプレートを外部化します。たとえば、次のようなスクリプトタグ内にテンプレートがあるとします

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

Events.tmplという名前の新しいファイルを作成し、そこにテンプレートをコピーして貼り付けます。スクリプト要素自体を必ず削除してください。

そのようにHandlebarsコマンドラインスクリプトをインストールします

npm install -g handlebars

events.tmplを保存したフォルダーに移動して実行します

handlebars events.tmpl -f events.tmpl.js

Handlebars.jsをインクルードした後、コンパイル済みのJavaScriptをHTMLにインクルードします

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

そして、あなたはそれを持っています、超高速のプリコンパイルされたハンドルバーテンプレート。

115
Marco

このためのもう1つの素晴らしいオプションは、 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ファイルに自動的にコンパイルします。

ハンドルバーを操作するための本当にrad方法。

15
Scott Silvi

ここに私がそれをする方法があります：

準備

すべてのテンプレート変数が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

使用法

ランタイムを含めた後、HTMLページにcompiled.jsを含めます。

<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に注意してください。テンプレートのコンパイル時に自動的に削除されます。

追加：Jetbrains IDEのいずれかと Handlebars/Mustacheプラグイン を併用すると、非常に優れたエディターサポートが得られます。

10
apfelbox

Gruntを使用したハンドルバーテンプレートのプリコンパイル

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

Package.jsonにリストされている依存関係をインストールするには：

npm install

これで、必要なすべてのノードの依存関係がインストールされました。プロジェクトのルートディレクトリに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）お好みに合わせて設定：

Require.jsを使用していない場合、handlebars.compile.options.AMDをfalseに変更します。 namespaceオプションを好みに合わせて微調整することもできます。 require/AMDモジュールを使用している場合、名前空間プロパティは重要ではありません（削除した場合のデフォルトは「JST」です）。

すべてのプロジェクト構造は少し異なるため、Gruntfileを少し構成する必要があります。定数TEMPLATES_LOCATION、TEMPLATES_EXTENSION、TEMPLATES_OUTPUT_LOCATION、TEMPLATES_OUTPUT_FILENAMEをプロジェクトに合わせて変更します。

テンプレートがアプリケーション全体に散らばっている場合は、TEMPLATES_LOCATIONを可能な限り低いディレクトリに変更する必要があります。 Gruntがサードパーティのテンプレートをアプリケーションのコンパイル済みテンプレートにコンパイルしないように、テンプレートがnode_modules、bower_components、またはその他のサードパーティのディレクトリから分離されていることを確認してください。 ./src、./js、./appディレクトリにすべての独自のコードを含めると、大丈夫です。

5）Gruntを使用したテンプレートのコンパイル：

バックグラウンドで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.
6
Cory Danielson

Handlebars 2.0.0 alphaアップデートの場合：

@Macroは、1つのテンプレートでどのように機能するかを非常に明確に説明しています。 handlebars.jsを機能させる方法に関するこの回答 を参照してください。

プリコンパイル済みテンプレートを使用しているときに「TypeError： 'undefined' is a function」ではない場合：

このエラーは、templateSpec.call（container、Handlebars、context、options.helpers、options.partials、options.data）を評価するときに「handlebar.runtime.js」行436で発生しました。

これは、インストールされたコンパイラ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にブラウザーリビジョン4がインストールされている場合、上記の問題が発生します。

修正するには、次のコマンドでハンドルバー1.3.0をインストールします

npm install [email protected] -g

その後、もう一度コンパイルしてみてください。今回は表示されます。一致するバージョン情報が表示されるので、プリコンパイル済みのテンプレートを使用してください。

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


テンプレートがたくさんある場合は説明してください：

最初に、ブレースされたテンプレートの各部分を外部化します：event.handlebars、item.handlebarsなど。これらをすべて「/ templates」と言う1つのフォルダーに入れることができます。

次のコマンドを使用して、すべてのファイルをコンパイルし、1つのファイルに連結します。

handlebars *.handlebars -f templates.js

このファイルをHTMLにhandlebars.runtimeを含めます

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

テンプレートは、名前でHandlebars.templatesに注入されます。たとえば、event.handlebarsはHandlebars.tempaltes ['event']からアクセスできます。

3
yeelan