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