एम्बरजे हैंडलबर्स प्रीकंपलिंग

Question

मेरा एम्बरज ऐप धीरे-धीरे चल रहा है इसलिए मैं रनटाइम को थोड़ा सा आसान बनाने के लिए अपने टेम्पलेट को प्रीकंपाइल करना चाहता था। हालांकि मैं आगे बढ़ने के तरीके पर खो गया हूं। मैंने http://handlebarsjs.com/precompilation.html और एम्बरजेस परिचय पढ़ा लेकिन नहीं, मैं बस साइट पर निर्देशित एक टेम्पलेट फ़ाइल बना रहा था, और मैं यह नहीं समझ सकता कि एम्बरजेस में इस टेम्पलेट फ़ाइल के साथ क्या और कैसे करना है।

मैं एम्बरज में टेम्पलेट्स को प्रीकंपाइल कैसे कर सकता हूं? Emberjs में इसका उपयोग करने के लिए टेम्पलेट फ़ाइल के साथ मुझे क्या करना चाहिए?

Answer 1

आप एम्बर व्यू पर टेम्पलेट प्रॉपर्टी (टेम्पलेटनाम नहीं) पर प्रीकंपिल्ड हैंडलबार्स आउटपुट सेट कर सकते हैं। यह वही है एंबर भी हुड

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

Answer 2

यहाँ हैंडल टेम्पलेट्स precompile और 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 एंबर के Handlebars कार्यान्वयन क्या Handlebars ही प्रदान करता है की चोटी पर कुछ कार्यक्षमता जोड़ता है कि है के साथ समस्या आप ember-precompile package स्थापित करना चाहते हैं, जो मूल रूप से handlebars कमांड-लाइन उपयोगिता के समान इंटरफ़ेस प्रदान करता है, लेकिन एम्बर के हैंडलबार कार्यान्वयन का उपयोग करता है।

इस के बाद से यह अपने आप अपडेट हो, तो आप template रों के लिए अपने सभी templateName रों बदलने के लिए होने और प्रत्येक दृश्य में 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> 

Answer 4

आप ग्राहक की में precompile कर सकते हैं ब्राउज़र, थॉमस Bartelmess के रूप में कहा।

तुम भी precompile 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 और एक हैंडल टेम्पलेट संकलक इस्तेमाल कर सकते हैं। मैंने "ग्रंट-एम्बर-टेम्पलेट्स" प्लगइन का उपयोग किया है और यह अच्छी तरह से काम करता है।

http://gruntjs.com/

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

Answer 6

मैं के लिए Gulp उपयोग कर रहा हूँ बनाता है, और precompiling टेम्पलेट्स इस तरह दिखता है:

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 क्रम पुस्तकालय का उपयोग करें।

एंबर-Handlebars: https://www.npmjs.org/package/gulp-ember-handlebars