Can somebody help me with a sample code on how to use the handlebars runtime library (handlebars.runtime.js) please?
I have tried to use Handlebars.compile, which obviously does not work, because I know runtime library is to avoid compiling templates.
Also I have tried to use Handlebars.template method by passing the template as a string, but it is not working as the template method expects a function as a parameter.
I think I am doing something basically wrong. Are there any documentations on how to use runtime library on its own?
Much appreciate the help.
More details:
I first used handlebars.js file, which was working good, but my team-mate noticed the compressed file is too big (>40KB) for our purpose (just a few templates in our site).
So, I tried using just handlebars.runtime.js file. Is this correct, or am I missing something?
Here is the sample I have tried: http://jsfiddle.net/2KfsM/
<div id="container"></div>
<script id="hb-example" type="text/handlebars-template">
<p>{{sampleText}}</p>
</script>
The js piece:
var template = Handlebars.compile($('#hb-example').html());
$('#container').html(template({sampleText: 'Here is a sample'}));
You can really improve performance by precompiling your template. But, in order to use the handlebar runtime library you have to first compile your existing template.
There is no Handlebars.compile function available in the runtime library.
Here is some links:
http://handlebarsjs.com/precompilation.html
http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro
Related
I am building an Angular-Dart site based on a commercial Bootstrap template.
The correct rendering should be like this:
I used IntelliJ to scaffold a Dart/Angular app and started to modify from there.
I have put related files (CSS/JS/images) of that template into web/css, web/js, respectively.
HTML used is verbatim copied from the template but I have taken out the CSS, JS reference from btqun_component.html and moved into index.html.
The output is like this:
Obviously, the CSS is working, and the header/footer are showing correctly. But the masonry effect is not showing, so I doubt that is related to JS reference.
Can anyone give any hints on this?
Do you have a documentation for the bootstrap template ? I guess you need to execute the javascript they provide to you so you need to add it to your index.html, and you probably need to import bootstrap and jquery too.
If you need to call a javascript function you can do it directly in the index.html inside a script tag or build a dart wrapper using package:js
EDIT: answer to call jQuery function from Dart
I have observed that, while writing JS in script tags into the template will run the script, inserting them into the template using a Handlebars expression will prevent it from running.
I have tried writing this into my component:
test: Ember.String.htmlSafe("<script>console.log('Hello World')</script>")
And in my template:
{{test}}
This will insert it into the DOM, but will not run the code. I thought it was because HTMLBars did not allow script tags in the template, but just writing
<script>console.log('Hello World')</script>
into the template itself will run the JS within.
Can somebody tell me if there is a way to achieve this, or provide an explanation as to why this happens? Thanks in advance.
If you work with javascript string you can use extra {{{ }}} to display them properly. Safe template output with:
{{{test}}}
That will do the job. Have a look at this blog post
http://www.kaspertidemann.com/html-safe-strings-in-handlebars/
There is no need to do that. You can either run JavaScript code from your Component or have <script> tag in your template (like you've described in your question).
I'm using Ember and an upload plugin. The plugin allows me to overwrite it's HTML template through a property as a string.
$("#fileUpload").dropzone({
previewTemplate: ' some huge html string',
});
Adding in a string of HTML would be difficult to support and look awful so I created an external Handlebars .hbs file which houses the template HTML.
Normally I would populate this template without an issue using $.get(). However, I imagine that Ember has a way to do this intelligently. I've dug through the API and haven't seen anything specific to help me with this.
I would think something like var template = Ember.Handlebars.get('upload.hbs'); would work but it returns an error.
Any help would be appreciated.
Just trying to summarise what you are doing, after clarification from my previous (deleted) answer.
You have a plugin, that accepts a plain html string.
The html string you want to provide to the plugin is very long.
You want to store the string as an external file, to avoid including in your regular code.
The html string is not a Handlebars template though you store it as upload.hbs.
You were hoping that Ember would have a method for loading remote templates, that you could use to avoid using jQuery GET.
No method to load remote templates:
The reality is that Ember does not have a built in method for loading remote template files in their raw format. It does however allow you to precompile handlebars templates to JavaScript that can be included as a regular script tag. But as you are not using a handlebars template pre-compilation would do nothing more than wrap your html string in some JavaScript.
There is no such feature documented.
Nor is there in the source code.
Why Ember.Handlebars.get('upload.hbs') won't work:
This method is used to get the content of locally included templates. That means it only looks for templates that exist in the Ember.TEMPLATES array or from the <script> tags of type text/x-handlebars.
The reason why Ember does not have the ability to load remote template files:
It does not have a method for loading in raw handlebars files because:
Many people use the precompiled handlebars files (which can be loaded as remote JS)
Many people use the inline <script type="text/x-handlebars"></script> tags. It's notable that you cannot use the src attribute of script to pull in a handlebars template, because browsers will only accept src for text/javascript.
Ember relies on jQuery, and as jQuery provides suitable methods GET & AJAX it's trivial to implement in conjunction with Ember.Handlebars.compile("<strong>Hello {{name}}</strong>"), if required.
Your template:
As you are not using a Handlebars template and you are just loading html, the correct approach, as you suspected is simply jQuery GET.
$.get( "dropZoneUploadTemplate.html", function(template) {
$("#fileUpload").dropzone({
previewTemplate: template
});
});
Summary
While it is nice to use Ember where possible, this simply is a jQuery task. Sorry it's not the answer you were hoping for. Maybe in future versions of Ember it will include such as feature.
Making the uploader into an Ember Component:
You could turn your uploader into an Ember Component like this, and combine with the jQuery GET to take care of loading in your html.
App.FileUploadComponent = Ember.Component.extend({
template: Ember.Handlebars.compile("<input type='file' />"),
didInsertElement: function(){
var c = this.$(":file");
$.get("dropZoneUploadTemplate.html", function(template){
c.dropzone({ previewTemplate: template });
});
}
});
This would mean every time you want to use the upload control in your Ember templated view you can simply do:
{{file-upload}}
I hope this helps.
I registered *.tpl file type as a "Java Server Page" file, although it's an UnderscoreJS template code (JavaScript! Not Java as the file editor points, due to this configuration).
It's all nice but the formatting breaks the code lines of my EJS style template code, as shown in the following image:
I've managed to isolate the problem - it breaks when my code uses Underscore.JS' each() function, i.e code like the following creates the breaking (otherwise it would format nicely):
_.each(models, function(model) {
// some code..
}
);
What can be done? I'm looking for a "native" solution, i.e not use Eclipse formatting plugin.
Maybe associate the file type with another editor? Then, which?
There's an EJS plugin in IDEA 13.
Trying out backbone+express with Jade as default templating.
Following a tutorial here(Great tutorial)
Confusion:
Many tutorials about backbone uses underscore template or handlebar to compile and render view.
I was using Jade as default template engine. My question is if I am using Jade then do I have to use another templating like Handlebar or underscore. If not how can I achieve following in Jade
render: function() {
var template = $("#booktemplate").html();
var compiled = Handlebars.compile(template);
var html = compiled(this.model.attributes);
this.$el.html(html);
return this;
},
My assumption: I am thinking Jade and Handle bar both are templating system and can be used alternatively. Is it so?
Why not use both Jade & Handlebar? I dont want to use two different syntaxes
#{} from jade / {{}} from Handlebar
Using Jade on the browser is not really a simple task. Thing is Jade is built for server side and does not support browsers.
This is why you'll often see people using two templates engines (if they use Jade). Some others are just gonna use Handlebars or Underscore everywhere - this is easier because templates engine working in the browser should work on the server. The other way around is not always true though.
Point to be taken here is that before starting to use a template engine, make sure it supports the environment you wish to target. There's plenty of options in term of engine, and this site can help you find one fittings your need: http://garann.github.io/template-chooser/
If you're really like Jade, then, you can use a stack like Browserify and some middleware (Jadeify) to make it work after pre-compilation. But you need to buy into the browserify concept and accept to precompile everything, everytime. You can check this related question for more details: https://stackoverflow.com/a/6623561/1024223