4

この質問は、もう少し文脈を与えると思います：

Handlebars.js (jQuery Mobile 環境) でコンパイル済みテンプレートを使用する

基本的に私はプリコンパイルのことを学ぼうとしているので、読み込み時間を節約し、html ドキュメントをきれいに保つことができます。まだ開始していませんが、上記のリンクに基づいて、すべてのテンプレートに独自のファイルが必要です。ロードするリンクが多くなりませんか？必要がなければ、複数の HTTP リクエストを作成したくありません。

したがって、誰かが光を当てることができれば、HTML からテンプレートを取得できるが、100 の異なるテンプレート ファイルをロードする必要がない代替手段を提供する可能性があります。

4

1 に答える 1

6

Grunt.js のようなツールを使用すると、テンプレートを作成して使用することもできます。たとえば、次のファイルはテンプレートをコンパイルし、それらを 1 つのファイルに連結します。

module.exports = function(grunt) {
  grunt.loadNpmTasks("grunt-contrib-handlebars");

  // Project configuration.
  grunt.initConfig({
    // Project metadata, used by the <banner> directive.
    meta: {},

    handlebars: {
      dist: {
        options: {
          namespace: "JST",
          wrapped: "true"
        },
        files: {
          "templates.js": [
            "./fileA.tmpl",
            "./fileB.tmpl"
          ]
        }
      }
    }
  });

  // Default task.
  grunt.registerTask("default", "handlebars");
};

コンパイル済みのテンプレートを使い始めたばかりなので、まだ解決していないのはワークフローです。展開されたバージョンのアプリを実行しているときにテンプレートをコンパイルできるようにしたいのですが、開発とデバッグを行うときは、元の個々のファイルをコンパイルされていない形式にして、編集してページをリロードできるようにしたいと考えています。

ファローアップ：

利用可能な場合は事前にコンパイルされたテンプレートを使用する方法と、人々が開発およびデバッグ作業を行っているときにその場で編集できる個々のテンプレートを使用する方法の両方を考え出した後、これに戻りたいと思いました。 -reload-test は、Grunt ビルドを行わずにサイクルします。

私が思いついた答えは、JST[] データ構造の存在を確認してから、特定のコンパイル済みテンプレートがその構造に存在するかどうかをさらにテストして確認することでした。そうであれば、それ以上何もする必要はありません。そこにない場合は、テンプレートが読み込まれ (これには RequireJS を使用します)、コンパイルされて、コンパイル済みのテンプレートが読み込まれた場合と同じ名前で同じ JST[] 配列に配置されます。

そうすれば、実際にテンプレートを使用するときに、コードは 1 か所だけを検索し、常に同じになります。

近い将来、開発者にとってコードをシンプルに保ちながら、テストを実行し、コードをロード/コンパイルするための RequireJS プラグインが用意される可能性が高いと思います。

于 2012-12-06T13:57:12.560 に答える