I have the following template in bootstrap.js file:
As you can see, WebStorm shows errors because it can't parse the source correctly.
I'm wondering if there is any way:
to completely disable inspection on that particular region in the file
wrap it in the comments and specify for the template engine to remove these comments when rendering template.
WebStorm provides no support for UnderscoreJS (WEB-679). But, as the syntax looks similar to EJS, you can try the following:
associate the .js files with embedded template syntax with EJS file type, by adding <file_name>.js as a pattern there
when associating, choose 'javascript' as template data language for these files
Related
Do I need to install something to get this to work?
I have a Rails App that utilizes views writen in haml with a few javascript-based widgets here and there.
I've abstracted all of the strings in the haml file by referencing the en.yml file. (soon there will be a yml file for each language which is very exciting!)
The only strings left are the ones in the javascript widgets. How can I abstract those? Is there a syntax? Do I need a gem? I don't really know how to look this up because I'm not sure if I'm describing this in the proper programming terms.
You can pre-process any of your javascript files, just append .erb or .haml to the file name.
For example, if you have something like this:
// app/assets/javascript/main.js
console.log('some text');
You could localize it like this:
// app/assets/javascript/main.js.erb
console.log("<%= j I18n.t('some.text') %>");
// config/locales/en.yml
en:
some:
text: Some text
Alternatively, you may take a look at this gem.
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.
I have some twig files that are a mixture of JavaScript, HTML, and twig markup. Is there a way with Eclipse to hi-lite a section of code and format it as, say JavaScript, then hi-lite another section and format it as HTML? I tried association the file type *.twig with the JavaScript editor, but, I do not seem to get any formatting. Syntax highlighting and code completion would be good too.
Thanks,
Scott
It is possible. If you have HTML/JS editors available (eclipse classic has them by default).
Go to preferences and: General > Editors > File Associations and add *.twig as a new file type and then add HTML editor (in the bottom panel) to it.
Then go to: General > Content Types, click on Text/HTML node (in Content Types box) and add *.twig file association in the bottom panel.
I've checked this and it works.
You can try to find a plugin that will support twig files and provide syntax highlighting. The Twig Eclipse Plugin looks promising as it at least seems to support HTML and twig markup together.
I was trying to convince a fellow co-worker into using Mustache/Hogan in the front-end of a project and I proposed the following:
Having a templates.js file, which could roughly look like this:
var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...
Then, we would include templates.js and use the corresponding tpl in the Mustache/Hogan.js rendering.
My proposal was turned down, since we're hardcoding html templates into js variables.
Is this really that bad? Which are other alternatives to this?
To answer your question, putting your templates in javascript variables inside a static JavaScript file makes it difficult to maintain your templates. You need to worry about string escaping whenever you want to make a simple change. And 1 syntax error will crash your app.
However, putting all your templates in a single JavaScript file is the fastest way to load your templates.
Your alternatives are:
Storing your templates in seperate files and generating the static template.js file as a prebuild step.
Loading your html template files async through AJAX into javascript variables.
Using a library like Require.js that will load your templates asynchronously as needed into variables.
My preferred way of doing this is to create a separate template file that can be loaded dynamically in development and baked into pure js for production.
Specifically I use eco templates (I wouldn't recommend them unless you're familiar with coffee script) and Stitch for node.js. Stitch supports custom engines tied to file extensions, so when it finds an eco file in my project directory it compiles it into a Javascript function. I can now include that function in any other part of my application using the stitch provided require function using the original path of the eco file. So if the template resided in src/views/listItem.eco I would run var listItemView = require('views/listItem'); to fetch it and use it like this
var html = listItemView({item: items[i]});
$someElement.html(html);
You could use require.js instead of stitch if course, or any other similar framework.