Emberjs Handlebars precompiling - ember.js

My Emberjs app is running slowly so I wanted to precompile my template to ease the runtime a bit. However I'm lost on how to proceed. I read http://handlebarsjs.com/precompilation.html and Emberjs introduction but no, all I could do was just creating a template file as instructed on the site, and I cannot figure out what and how to do with this template file in Emberjs.
How can I precompile templates in Emberjs? What should I do with the template file to use it in Emberjs?

To clarify, Thomas' example as-written is still doing the template compilation at run-time. I think his point, though, was that after you've loaded your precompiled Ember-Handlebars templates you can do this:
MyApp.MyView = Ember.View.extend({
template: Ember.TEMPLATES.mytemplate,
})
The problem with using Handlebars' built-in precompiler is that Ember's Handlebars implementation adds some functionality on top of what Handlebars itself provides, so you'll want to install the ember-precompile package, which provides basically the same interface as the handlebars command-line utility, but using Ember's Handlebars implementation.
This will avoid you having to change all your templateNames to templates and having to add in the Ember.TEMPLATES... in each view, since it automatically updates Ember's built-in template cache.
So, assuming you've already loaded your pre-complied templates.js file as output from ember-precompile templates/*.handlebars -f templates/templates.js, here's a more complete example snippet of a worker import/initialization order:
<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>

You could also use Grunt.js and a handlebars template compiler. I've used the "grunt-ember-templates" plugin and it works well.
http://gruntjs.com/
https://npmjs.org/package/grunt-ember-templates

Here is a gist showing how to precompile handlebars templates and add the result to the Ember.TEMPLATES object, which Ember consults to resolve named templates.
https://gist.github.com/2013669

I'm using Gulp for builds, and precompiling templates looks like this:
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));
});
Then I use the Handlebars runtime library rather than the full version.
Ember-Handlebars: https://www.npmjs.org/package/gulp-ember-handlebars

You can precompile in the client's browser, as Thomas Bartelmess stated.
You can also precompile using handlebars via nodejs (taken from my very own 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");

You can set the precompiled handlebars output to the template property (not templateName) on you ember view. This is what ember also does under the hood
MyApp.MyView = Ember.View.extend({
templateName: "myViewWhatever",
template: Ember.Handlebars.compile('<p>{{blah}}</p>'),
})

Related

return value from computed properties callback did not update templates

Sorry for the long title. Its quite hard to put into words.
Ember version: 1.2.0
here goes:
My components:
App.AutocompleteComponent = Ember.Component.extend({
searchResults: function() {
var returnValue
var service = new google.maps.places.AutocompleteService();
service.getPlacePredictions({options},callback);
function callback(results){
returnValue = results;
}
return returnValue;
}.property('searchText')
My Templates:
{{input type="text" value=searchText placeholder="Search..."}}
<ul >
{{#each itemResults}}
<li>{{this.name}}</li>
{{/each}}
</ul>
When i debug using ember chrome debug tool, i can see the component holding the searchResults values correctly. But it is not being updated accordingly in the template.
Any ideas?
if this way of handling/using computed property is not suggested, can suggest any other ways?
Thank you in advance.
You probably want to debounce this (and I don't know what options is, is it a global var?). And the template is itemResults instead of searchResults. http://emberjs.com/api/classes/Ember.run.html#method_debounce
watchSearchResults: function() {
var self = this;
var service = new google.maps.places.AutocompleteService();
var callback= function(results){
self.set('searchResults', results);
}
service.getPlacePredictions({options},callback);
}.observes('searchText')
Thank you kingpin2k for your response,
I have found other way of dealing with returns that obviously didn't work on callbacks and since computed property which in a way requires 'returns' making it not feasible on this use case.
Instead i have opt to using Observers.
By the way, this code is was meant to be dealing with auto complete.
here is the final code:
WebClient.AutocompleteFromComponent = Ember.Component.extend({
searchTextChanged: Em.observer('searchText',function(){
var service = new google.maps.places.AutocompleteService();
service.getPlacePredictions({
input: this.get('searchText'),
types: ['(regions)'],
componentRestrictions: {
country: 'my'
}
}, function(predictions, status) {
//Start callback function
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
for (var i = 0, prediction; prediction = predictions[i]; i++) {
console.log(prediction.description);
mapItem = {};
mapItem.name = prediction.description;
mapItem.type = 'map'
mapItem.reference = prediction.reference;
itemResults.push(mapItem);
}
//console.log(itemResults)
self.set('itemResults', itemResults)
});
})
The template code is still the same.

Ember.Handlebars.compile returns code instead of handlebars output

I have a view that looks like this:
App.StarRatingView = Ember.View.extend({
template: function() {
return new Ember.Handlebars.compile('test')
}
})
This is supposed to insert test in the page, but instead it inserts the definition of the compile() function:
function (context, options) { options = options || {}; var result = templateSpec.call(container, Handlebars, context, options.helpers, options.partials, options.data); var compilerInfo = container.compilerInfo || [], compilerRevision = compilerInfo[0] || 1, currentRevision = Handlebars.COMPILER_REVISION; if (compilerRevision !== currentRevision) { if (compilerRevision < currentRevision) { var runtimeVersions = Handlebars.REVISION_CHANGES[currentRevision], compilerVersions = Handlebars.REVISION_CHANGES[compilerRevision]; throw "Template was precompiled with an older version of Handlebars than the current runtime. "+ "Please update your precompiler to a newer version ("+runtimeVersions+") or downgrade your runtime to an older version ("+compilerVersions+")."; } else { // Use the embedded version info since the runtime doesn't know about this revision yet throw "Template was precompiled with a newer version of Handlebars than the current runtime. "+ "Please update your runtime to a newer version ("+compilerInfo[1]+")."; } } return result; }
Any ideas why this is happening?
It doesn't expect a function. This should do the trick
App.StarRatingView = Ember.View.extend({
template: Ember.Handlebars.compile('test')
})
Or even better:
App.StarRatingView = Ember.View.extend({
templateName: 'test'
})
Ember will now render the view using the given template name.
You can just set the template property to the contents of the compiled output:
App.StarRatingView = Ember.View.extend({
template: Ember.Handlebars.compile('test')
})
http://emberjs.jsbin.com/uYOvUWU/1/edit
Also see the emberjs docs on using templates in views

Backbone.js - preload external template with Require.js text plugin

I want to load external HTML template for Backbone view with Require.js text! plugin and make template path custom (get template path from View 'template' property). The problem is - template loads asynchronously and on render I still not have it. Here is my code:
custom View
define([
'views/abstract/base-view',
], function (BaseView) {
var AppView = BaseView.extend({
el: '#app-view',
template: 'app-view',
initialize: function () {
this.on('template:loaded', this.render, this);
BaseView.prototype.initialize.apply(this, arguments);
},
render: function () {
this.$el.empty();
var html = this.template();
this.$el.html(html);
}
});
return AppView;
});
and abstract View to inherit
define([], function () {
var AbstractView = Backbone.View.extend({
initialize: function(){
this.setTemplate();
},
setTemplate: function(){
var that = this;
require(['3p/text!templates/' + this.template + '.tpl'], function(tpl) {
that.template = _.template(tpl);
that.trigger('template:loaded');
});
}
});
return AbstractView;
});
It works but I don't like to listen to 'template:loaded' event for render. Any suggestions?
Thanks!
I had the same problem.
To avoid the async behaviour, there is no another way than add in some file the requires that will be dynamic and load all of them before.
I made something similar to an inject. I loaded in a require all the dynamic templates and put in a shared dictionary the paths of the template. Then I use _.template(require(inject["templateNAME"])) and I get the template at the moment.
The idea is something like the next:
define(["require"], function (require) {
require(["text!path/of/the/template",
... ]);
window.inject = {};
inject.templateNAME = "text!path/of/the/template";
Then you will use something like this:
var tpl = require(inject[this.templateName]);
this.template = _.template(tpl);

How to use this.template if app.js is not in document ready?

I tried to follow http://ricostacruz.com/backbone-patterns/#inline_templates to avoid http://ricostacruz.com/backbone-patterns/#abuse however I have a typical view like this:
// in app.js
App.MyView = Backbone.View.extend({
className: "ui-widget-content",
template: _.template($("#myTemplate").html()),
render: function()
{
this.$el.html(this.template(this.model.toJSON()));
}
Then I just include app.js like this
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/underscore.js"></script>
<script src="./js/backbone.js"></script>
<script src="./js/app.js"></script>
Browser complains that the $("#myTemplate") line in App.MyView.template is null (because document is not ready?). What shall I do?
Why not lazy-load your templates? Compile the template on first use and cache the compiled template in the view's "class". You could even add your base view to handle this caching with something like this:
var BV = Backbone.View.extend({
template: function(data) {
if(!this.constructor.prototype._template)
this.constructor.prototype._template = _.template($('#' + this.tmpl_id).html());
return this._template(data);
}
});
Then you could have things like this:
var V = BV.extend({
tmpl_id: 'tmpl',
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
and the #tmpl template would be compiled the first time it was used and it would be compiled at most once.
Demo: http://jsfiddle.net/ambiguous/hrnqC/
Notice the no wrap (head) in the demo and have a look at the console to see what is being compiled and how often.
my quick fix for this was to compile the template on view initialisation..
App.MyView = Backbone.View.extend({
className: "ui-widget-content",
template: '#myTemplate',
initialize: function(){
this.template = _.template($(this.template).html());
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
}
then everything else still works the same and you can put your render method in a base class..
The easiest thing to do is simply not cache the template:
App.MyView = Backbone.View.extend({
className: "ui-widget-content",
render: function()
{
var template = _.template($("#myTemplate").html())
this.$el.html(template(this.model.toJSON()));
}

Is it possible to load a Handlebars template via Ajax?

I would like to load additional templates on the fly. Is it possible?
You can register new templates in Ember.TEMPLATES. They will then be available to views.
An excerpt from my code (jQuery Ajax handler):
success: function(data) {
$(data).filter('script[type="text/x-handlebars"]').each(function() {
templateName = $(this).attr('data-template-name');
Ember.TEMPLATES[templateName] = Ember.Handlebars.compile($(this).html());
});
}
That's it.
I was just looking for the same thing and am about to have a play with the snippet below
credit: borismus on github https://gist.github.com/2165681
<script>
/*
* Loads a handlebars.js template at a given URL. Takes an optional name, in which case,
* the template is added and is reference-able via templateName.
*/
function loadTemplate(url, name, callback) {
var contents = $.get(url, function(templateText) {
var compiledTemplate = Ember.Handlebars.compile(templateText);
if (name) {
Ember.TEMPLATES[name] = compiledTemplate
} else {
Ember.View.create({ template: compiledTemplate }).append();
}
if (callback) {
callback();
}
});
}
</script>
I am using requirejs along with text plugin to load handlebar templates dynamically.
r.js optimizer will compile the handlerbar template to text file, which can be loaded easily using requirejs or even ajax