Emberjs把手预编译

Question

我的Emberjs应用程序运行缓慢，所以我想预编译我的模板以简化运行时间。然而我迷失在如何继续。我读http://handlebarsjs.com/precompilation.html和Emberjs的介绍，但没有，我所能做的只是按照网站上的指示创建一个模板文件，我无法弄清楚在Emberjs中使用这个模板文件的方式和方法。

如何预编译Emberjs中的模板？我应该如何处理模板文件以在Emberjs中使用它？

Answer 1

您可以在您的ember视图中将预编译的handlebars输出设置为template属性（不是templateName）。这是烬引擎盖

MyApp.MyView = Ember.View.extend({ 
    templateName: "myViewWhatever", 
    template: Ember.Handlebars.compile('<p>{{blah}}</p>'), 
}) 

Answer 2

这里是展示了如何预编译车把模板和结果添加到Ember.TEMPLATES对象，这灰烬协商解决命名模板的主旨下也一样。

https://gist.github.com/2013669

Answer 3

为了澄清，托马斯的例子如写仍是做在运行时的模板编译。我认为他的观点，虽然是已加载的后precompiled Ember-Handlebars templates你可以这样做：

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

使用Handlebars' built-in precompiler是Ember的把手实现增加了在什么把手本身提供顶级的一些功能性的问题，所以您需要安装ember-precompile package，它提供的命令行工具基本上与handlebars命令行实用程序具有相同的界面，但使用Ember的Handlebars实施。

这样可以避免您必须将所有templateName s更改为template s，并且必须在每个视图中添加Ember.TEMPLATES...，因为它会自动更新Ember的内置模板缓存。

因此，假设您已经加载您预先遵守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> 

Answer 4

您可以在客户端的预编译浏览器，正如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"); 

Answer 5

您也可以使用Grunt.js和车把模板编译器。我使用了“grunt-ember-templates”插件，效果很好。

http://gruntjs.com/

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

Answer 6

我使用的是咕嘟咕嘟的

建立和预编译模板看起来是这样的：

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

然后我用把手运行时库，而不是完整版本。

烬车把：https://www.npmjs.org/package/gulp-ember-handlebars