Emberjs Lenker vorkompilieren

Meine Emberjs app läuft langsam, so wollte ich precompile meine Vorlage zu erleichtern, die Laufzeit ein wenig. Aber ich bin verloren, wie es weitergeht. Ich lese http://handlebarsjs.com/precompilation.html und Emberjs Einführung aber Nein, alles was ich tun konnte, war nur die Erstellung einer template-Datei entsprechend den Anweisungen auf der Website, und ich kann nicht herausfinden, was und wie zu tun mit diese template-Datei in Emberjs.

Wie kann ich precompile-Vorlagen in Emberjs? Was soll ich mit der Vorlage-Datei, um es in Emberjs?

Kommentar zu dem Problem

Wenn Sie gulp ich veröffentlichte vor kurzem ein Paket npm genannt gulp-ember-Vorlagen die Kompilierung der LENKER templates in javascript und dann kann man concat Sie in einer einzigen Datei Kommentarautor: Stuart

möglich, Duplikat der Einfache Möglichkeit zur precompile-Emberjs LENKER Vorlagen mit nodejs? Kommentarautor: givanse

InformationsquelleAutor der Frage Stargazer | 2012-03-25

ember.js handlebars.js

-16

Können Sie die vorkompilierten LENKER Ausgabe in die template-Eigenschaft (nicht templateName) auf Sie ember anzeigen. Dies ist, was ember auch nicht unter die Haube
```
MyApp.MyView = Ember.View.extend({
  templateName: "myViewWhatever",
  template: Ember.Handlebars.compile('<p>{{blah}}</p>'),
})
```
InformationsquelleAutor der Antwort Thomas Bartelmess
37

Klären, Thomas' Beispiel-wie geschrieben-immer noch die template-Kompilierung zur Laufzeit. Ich glaube, sein Punkt, obwohl, war, dass, nachdem Sie geladen haben, Ihre vorkompilierte Ember-LENKER-Vorlagen Sie dies tun können:
```
MyApp.MyView = Ember.View.extend({
  template: Ember.TEMPLATES.mytemplate,
})
```
Das problem bei der Verwendung LENKER " built-in-precompiler ist, dass Ember LENKER Umsetzung fügt einige Funktionen, die über LENKER selbst bietet, so dass Sie installieren möchten ember-precompile-Paket, die bietet im Grunde die gleiche Schnittstelle wie die handlebars Befehlszeilen-Dienstprogramm, aber mit Ember LENKER Umsetzung.

Dies zu vermeiden, müssen Sie alle Ihre templateNames zu templates und dass Sie in der Ember.TEMPLATES... in jeder Ansicht, da es automatisch updates Ember built-in template-cache.

So, vorausgesetzt, Sie haben bereits geladen, Ihre pre-erfüllt templates.js - Datei als Ausgabe ember-precompile templates/*.handlebars -f templates/templates.js, hier ist eine komplette Beispiel-snippet ein Arbeiter importieren/Initialisierung um:
```
<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>
```
InformationsquelleAutor der Antwort Gabriel Grant
7

Könnte man auch verwenden Grunt.js und ein LENKER, der template-compiler. Ich habe mit der "grunt-ember-Vorlagen" plugin und es funktioniert gut.

http://gruntjs.com/

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

InformationsquelleAutor der Antwort okor
3

Hier ist eine Zusammenfassung, die zeigt, wie precompile-LENKER-Vorlagen und fügen Sie das Ergebnis für die Glut.VORLAGEN-Objekt, das Ember berät zu beheben benannten Vorlagen.

https://gist.github.com/2013669

InformationsquelleAutor der Antwort Luke Melia

Können Sie vorkompiliert in den browser des Clients, wie Thomas Bartelmess angegeben.

Können Sie auch precompile mit LENKER via nodejs (aus meiner ganz eigenen 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");

InformationsquelleAutor der Antwort Fordi

Ich bin mit Gulp für builds, und das vorkompilieren templates sieht wie folgt aus:

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