I like how simple Handlebars is and how its design encourages the user to not put logic into the view. I have used it to template things other than HTML, but I am noticing the Handlebars.js website only discusses HTML examples. Is Handlebars only for templating HTML?
My IDE IntelliJ also only syntax checks/highlights my Handlebars files as HTML. I was hoping renaming my handlebars files with the intended extension as secondary (like Question.xml.hbs) would clue IntelliJ into my intentions, but it continued processing like I was editing HTML. There do not appear to be any pragmas in Handlebars for me to indicate what my target format or MIME type should be.
Architecturally, is it bad form to use Handlebars for purposes other than HTML templating? What if I restrict myself to HTML-like languages, like XML?
Handlebars is used mostly with HTML. But you can change template language for a specified file in the IDEA settings. See:
Update:
In the settings you can specify a template language to whole project.
Related
I checked PyCharm knowledge base and "Google" but could not find if there is an equivalent to django template comments for "standalone" JavaScript files.
In Django, the following is not rendered when producing html pages (which also works for JavaScript code if it is in the template file):
{# this won't be rendered #}
// this will be rendered
source: https://docs.djangoproject.com/en/dev/topics/templates/#comments
Because I would like to separate JavaScript code from the template (put it in mySeparetedJsCode.js and including it via a script tag), the django template {# comment #} does not work anymore.
does someone know a solution for this?
What you want is a javascript minifier that will drop comments for you and do other space-saving measures, Uglify is a popular one that you can manually run on your js files when you deploy your code or anytime before that.
How to configure your minifier is application specific but with uglify it's controlled by the preserveComments directive, set preservComments: "some" which will keep any comment that starts with a ! and the rest will be removed, set it to "all" and all comments will be removed.
The common solution is to have a javascript toolchain setup for this as you always want to serve minified files in production. djangos collect-static is a good place to have any automated process if you dont have a build system in place.
For example django-webpack-loader, django-pipeline and django-compressor are packages that already does this for you.
i'm using Vue.js in a Website and added the templates in the html Code and the js-Code in a single js-file.
So i do not want to use the *.vue <-> Vuefy/Browserfy approach but bundle and minify my js-files later.
As i have to use Asp.Net MVC i could use split the single Html-file in a view and insert the vue-div-elements hierarchically structured with #Render.Partial(...).
This way i could do a clean separation and use the same system like the *.vue files.
Would this be a good practice?
Do you think it would be better to write the html and new Vue({}) in every partial .cshtml or just write the html code there and put the javascript into (a) js-file(s).
The js-code in script-tags could not be bundled and i don't like that much inline Code but it would a nice coupling of the components code.
By using multiple js-files i could store then in the views folder next to their partial partners and bundle them together with the VS Extension Bundler and Minifier.
Are these thoughts usefull or is there still a good aproach for using vuejs templates in asp.net?
EDIT: I used to write some of the partial views with a specific Preifx. The include inline script tags, wich comes the .vue approach very close and is cool in small components because its all in one page. The inline script is conditional with Razor, so only in the dev build it gets rendered inline, for production it get's send separated. To do so I wrote a powershell script and execute it as pre-build event to exctract all the inline code into a js-file.
This file get's bundled with the other js-files and is served minified for production. So i can use all the Razor features in the html/templates and other pages of the project are just *.cshtml views.
For only-one-SPA-sites the approach mentioned by iknowitwasyoufredo sounds better.
If you use vue.js to do some simple js tasks, instead of jquery I think it is good.
But if you want to have a single page application, routing, two way binding etc. mixing asp.net mvc views with vue.js is not a good idea. Eventually, you will face many problems.
It's an architectural decision but you could implement web api services with dotnet, and use this services from a node.js application (express, webpack, vue.js).
I have this use-case where I would like to have one navbar for all the pages. The technique which I used until now was to keep an external JSON file and fetch it using jQuery .getJSON library. I was using jQuery DOM methods to generate the HTML.
That I am finding messy and would love to use Handlebars template instead. But my doubt is, in Handlebars you add script within script tag inside the HTML. So is there a way to just write an individual Handlebars template and invoke it on all the pages?
I have done some searching and couldn't find anything. I am just asking if I can embed Handlebars template like that or I do have to explicitly embed for all the pages for which I need the navbar? In other words, can I add Handlebars template inside a xyz.js file.
Short answer is: yes you can. You can either precompile your templates to one JavaScript file and insert them to your document with JavaScript, by using a partial or with a hybrid method such as this one by Tal Bereznitskey, that makes it possible to mix and match precompiled and uncompiled templates.
I am wondering how to separate JavaScript and HTML. Of course, i include JS with:
<script src="function.js"></script>
But when i add dynamically HTML-Tags to the website with JS like:
$( "#content" ).append("<h2>");
Then there are HTML Tags inside JavaScript Code. Can i make this modular or is there any "Good Practice" to do it?
Or should i use a framework like Bootstrap to code larger projects and exclude those frameworks the HTML Tags?
If you really want to separate your application logic from the layout, you should use a template framework. There are a lot of frameworks out there who do the job like:
Underscore
Mustache
Handlebars
and many more
What you essentially do is providing data objects to the template engine. Based on the logic you define in the template you render the page without the need to clutter the application logic and the layout.
In order to find the right template engine for your application you might want to check out: http://garann.github.io/template-chooser/ Here you can define what kind of engine you are looking for and the website shows you the most suitable library.
you can create a hidden template object, then .clone() it in javascript. Or use one of many MVVM / template javascript frameworks
I'd really like to use a Javascript templating system together with Django. The syntax and style of Mustache.js (and it's derivatives) really sits well with me. The problem is the delimiter tag used by Mustache doesn't play nicely with the syntax of Django's templating system.
Is there any good way to use them together?
I have tried using this verbatim snippet to render the JS templates properly. The problem with that solution is I still sometimes need Django variables or URLs inside the JS.
I have also tried changing the delimiter for Mustache using
{{=[[ ]]=}}
However, that doesn't allow for using section tags, like {{#}}. The author has said he intends on removing that capability in future releases altogether.
Are there any template libraries for Javascript that follow closely to Mustache.js, but use different delimiters? Or is there another solution for changing the delimiters Mustache.js uses?
I've used jquery's templating with django. Ultimately I decided the best way is:
put all the javascript into static javascript files and serve them up without any serverside processing
in the django templates deliver all the html hooks (id's or classes) but no js.
in the js use 'document.ready' plus jquery selectors to insert tags into the page and attach events
if the js needs data then make an ajax call.
I softened on the last one and might embed data as a block of json into the django template, and perhaps also have a short js at the bottom of a template which do no more than set variables/parameters to instruct the js how to render the page - little clues from the server side telling it what to do.
Thus:
contention between the escape characters becomes a non-issue
you don't have to keep asking yourself "is this code running on the server or on the client" because you're not trying to write both at once into the one file
your javascript code is necessarily better structured and re-usable
It looks like it would be extremely easy to change Mustache's delimiters, although configurable delimiters should be supported in my opinion.
If this is not acceptable to you, there are many other templating libraries out there such as jquery-tmpl and underscore.template.
EJS is a pretty nice templating system. It uses <% %> tags.
Edit: More templating libs