Tay lái Emberjs biên dịch trước

Question

Ứng dụng Emberjs của tôi đang chạy chậm vì vậy tôi muốn biên dịch trước mẫu của mình để giảm bớt thời gian chạy một chút. Tuy nhiên tôi bị mất về cách tiến hành. Tôi đọc giới thiệu http://handlebarsjs.com/precompilation.html và Emberjs nhưng không, tất cả những gì tôi có thể làm chỉ là tạo một tệp mẫu theo hướng dẫn trên trang web và tôi không thể tìm ra cách và cách thực hiện với tệp mẫu này trong Emberjs.

Làm cách nào để tôi có thể biên dịch trước các mẫu trong Emberj? Tôi nên làm gì với tệp mẫu để sử dụng nó trong Emberjs?

Answer 1

Bạn có thể đặt đầu ra tay lái biên dịch trước thành thuộc tính mẫu (không phải templateName) trên chế độ xem ember. Đây là những gì ember cũng thực hiện dưới mui xe

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

Answer 2

Dưới đây là một ý chính cho thấy làm thế nào để precompile tay lái mẫu và thêm kết quả cho đối tượng Ember.TEMPLATES, mà Ember tư vấn để giải quyết tên mẫu.

https://gist.github.com/2013669

Answer 3

Để làm rõ, ví dụ Thomas' là viết vẫn làm mẫu biên soạn tại thời gian chạy. Tôi nghĩ rằng quan điểm của mình, tuy nhiên, là sau khi bạn đã nạp của bạn precompiled Ember-Handlebars templates bạn có thể làm điều này:

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

Vấn đề với việc sử dụng Handlebars' built-in precompiler là thi tay lái Ember của thêm một số chức năng trên đầu trang của những gì tay lái tự cung cấp, vì vậy bạn sẽ muốn cài đặt ember-precompile package, cung cấp cơ bản giao diện giống như tiện ích dòng lệnh handlebars, nhưng sử dụng thực thi Handlebars của Ember.

Điều này sẽ tránh bạn phải thay đổi tất cả templateName s thành template s và phải thêm vào Ember.TEMPLATES... trong mỗi chế độ xem vì nó tự động cập nhật bộ nhớ cache được tích hợp sẵn của Ember.

Vì vậy, giả sử bạn đã nạp tiền tuân templates.js tập tin của bạn như là đầu ra từ ember-precompile templates/*.handlebars -f templates/templates.js, đây là một đoạn mã ví dụ hoàn chỉnh hơn về một nhân viên trật tự nhập khẩu/khởi tạo:

<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

Bạn có thể precompile trong các khách hàng của trình duyệt, như Thomas Bartelmess đã nói.

Bạn cũng có thể sử dụng tiền biên dịch tay lái qua nodejs (lấy từ Jakefile rất riêng của tôi):

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

Bạn cũng có thể sử dụng Grunt.js và một mẫu biên dịch tay lái. Tôi đã sử dụng plugin "grunt-ember-templates" và nó hoạt động tốt.

http://gruntjs.com/

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

Answer 6

Tôi đang sử dụng Gulp cho xây dựng, và precompiling mẫu trông như thế này:

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

Sau đó, tôi sử dụng thư viện runtime tay lái chứ không phải là phiên bản đầy đủ.

Ember-tay lái: https://www.npmjs.org/package/gulp-ember-handlebars