web-dev-qa-db-ja.com

Emberjsハンドルバーのプリコンパイル

Emberjsアプリの実行速度が遅いため、テンプレートをプリコンパイルして、ランタイムを少し緩和したいと思いました。しかし、どうすればいいのか迷っています。私は http://handlebarsjs.com/precompilation.html とEmberjsの紹介を読みましたが、いいえ、サイトで指示されているとおりにテンプレートファイルを作成するだけで、何がどのように行われるのかわかりませんEmberjsでこのテンプレートファイルを使用します。

Emberjsでテンプレートをプリコンパイルするにはどうすればよいですか？ Emberjsで使用するには、テンプレートファイルをどうすればよいですか？

ember.jshandlebars.js
27
Stargazer

明確にするために、Thomasのas-writtenの例は、まだ実行時にテンプレートのコンパイルを行っています。 プリコンパイルされたEmber-Handlebarsテンプレート をロードした後、これを実行できるというのが彼のポイントだと思います。

MyApp.MyView = Ember.View.extend({
  template: Ember.TEMPLATES.mytemplate,
})

Handlebarsの組み込みプリコンパイラー を使用する際の問題は、EmberのHandlebars実装が、Handlebars自体が提供する機能に加えていくつかの機能を追加するため、 ember-precompileパッケージ 。これは基本的にhandlebarsコマンドラインユーティリティと同じインターフェイスを提供しますが、Emberのハンドルバー実装を使用します。

これにより、Emberの組み込みテンプレートキャッシュが自動的に更新されるため、すべてのtemplateNamesをtemplatesに変更し、各ビューにEmber.TEMPLATES...を追加する必要がなくなります。

そのため、コンパイル済みのtemplates.jsファイルをember-precompile templates/*.handlebars -f templates/templates.jsからの出力として既にロードしていると仮定すると、ワーカーのインポート/初期化順序のより完全なサンプルスニペットは次のようになります。

<script src="/lib/handlebars-1.0.0.beta.6.js"></script>
<script src="/lib/ember-1.0.pre.js"></script>
<script src="/lib/ember-data-latest.js"></script>
<script>
  var App = Ember.Application.create();
</script>
<script src="/templates/templates.js"></script>
<script src="/js/models.js"></script>
<script src="/js/views.js"></script>
<script src="/js/controllers.js"></script>
<script src="/js/router.js"></script>
<script>
  App.initialize();
</script>
38
Gabriel Grant

Grunt.jsとハンドルバーテンプレートコンパイラを使用することもできます。私は「grunt-ember-templates」プラグインを使用しましたが、うまく機能します。

http://gruntjs.com/

https://npmjs.org/package/grunt-ember-templates

7
okor

ハンドルバーテンプレートをプリコンパイルし、結果をEmber.TEMPLATESオブジェクトに追加する方法を示す要点を次に示します。これは、Emberが名前付きテンプレートを解決するために参照します。

https://Gist.github.com/2013669

3
Luke Melia

ビルドにGulpを使用しており、テンプレートのプリコンパイルは次のようになります。

var handlebars = require('gulp-ember-handlebars');
var concat = require('gulp-concat');

var SRC = {
    TEMPLATES: ['app/templates/**/*.{hbs,html}']
};

gulp.task('templates', function() {
  return gulp.src(SRC.TEMPLATES)
    .pipe(handlebars({outputType: 'browser'}))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest(DEST.SCRIPTS));
});

次に、フルバージョンではなくHandlebarsランタイムライブラリを使用します。

Ember-Handlebars： https://www.npmjs.org/package/gulp-ember-handlebars

0
Rahul_Dabhi

Thomas Bartelmessが述べたように、クライアントのブラウザでプリコンパイルできます。

Nodejsを介してハンドルバーを使用してプリコンパイルすることもできます（自分のJakefileから取得）。

var Handlebars = require('handlebars');
precompile = (function () {
    //Lovingly extracted from Ember's sources.
    var objectCreate = Object.create || function (parent) {
            function F() {}
            F.prototype = parent;
            return new F();
        },
        Compiler = function () {},
        JavaScriptCompiler = function () {};

    Compiler.prototype = objectCreate(Handlebars.Compiler.prototype);
    Compiler.prototype.compiler = Compiler;
    JavaScriptCompiler.prototype = objectCreate(Handlebars.JavaScriptCompiler.prototype);
    JavaScriptCompiler.prototype.compiler = JavaScriptCompiler;
    JavaScriptCompiler.prototype.namespace = "Ember.Handlebars";
    JavaScriptCompiler.prototype.initializeBuffer = function () {
        return "''";
    };
    JavaScriptCompiler.prototype.appendToBuffer = function (string) {
        return "data.buffer.Push(" + string + ");";
    };
    Compiler.prototype.mustache = function (mustache) {
        if (mustache.params.length || mustache.hash) {
            return Handlebars.Compiler.prototype.mustache.call(this, mustache);
        } else {
            var id = new Handlebars.AST.IdNode(['_triageMustache']);
            if (!mustache.escaped) {
                mustache.hash = mustache.hash || new Handlebars.AST.HashNode([]);
                mustache.hash.pairs.Push(["unescaped", new Handlebars.AST.StringNode("true")]);
            }
            mustache = new Handlebars.AST.MustacheNode([id].concat([mustache.id]), mustache.hash, !mustache.escaped);
            return Handlebars.Compiler.prototype.mustache.call(this, mustache);
        }
    };
    return function precompile(string) {
        var ast = Handlebars.parse(string);
        var options = {
            knownHelpers : {
                action : true,
                unbound : true,
                bindAttr : true,
                template : true,
                view : true,
                _triageMustache : true
            },
            data : true,
            stringParams : true
        };

        var environment = new Compiler().compile(ast, options);
        return new JavaScriptCompiler().compile(environment, options, undefined, true);
    };
}());

strPrecompiledTemplate = item.handlebarsTemplateFolders.map(function (dir) {
    console.info("\tProcessing " + dir);
    return readdirRecursiveSync(dir).map(function (file) {
        console.info("\t\t" + file);
        var content = fs.readFileSync(file, 'utf-8');
        content = Handlebars.precompile(content);
        file = file.replace(/\.[^\.]+$/, '').replace(/^src\//g, '').substr(dir.length).replace(/^\/+/, '');
        // Pay attention: The wrap in Ember.Handlebars.template() is important!
        return "Ember.TEMPLATES['"+file+"'] = Ember.Handlebars.template("+content+");";
    }).join("\r\n");
}).join("\r\n");
0
Fordi