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).
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 html snippets as template literals in my JavaScript code. As the snippets are spread over multiple files and can be quite large and complex in structure and nesting, it can happen that some closing tags are mistakenly omitted or nesting is wrong.
Is there a way to automate checking of these html pieces for correct nesting and balance of opening and closing tags?
Try to go with best IDE like Netbeans, VScode or sublime where you can easy track the HTML tags opening and closing , Code Syntax(PHP,JS,CSS etc).
You can surely opt for an IDE, otherwise you can use a html validator in gulp task and verify your html files. Gulp task will first remove literals from the file(temporarily) and then stream the output to the validator.
I have problem. Server generate html code and returns to me, with script tags, i needed render this into my React component. I must render the html code (like dangerouslySetInnerHTML), and run script tags. You do not know the solution? Sorry for my english.
You can render the script tags from componentWillMount or componentDidMount, but not dangerouslySetInnerHTML for security purposes. You could easily strip out <script> tags with regular expressions and run that from one of the said methods.
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
There are essentially 2 places to define JavaScript functions in Grails, directly in a element on the GSP, and within a separate javascript source file under /web-app/js (for example, application.js). We have defined a commonly reused javascript function within application.js, but we also need to be able to generate parts of the function dynamically using groovy code. Unfortunately, ${some groovy code} does not appear to be processed within separate javascript source files.
Is the only way to do this by defining the javascript function within a script tag on a GSP page, or is there a more general solution? Obviously we could define the javascript function in a script tag within a template GSP file which would be reused, but there is a lot of push to keep our javascript functions defined all together in one place (i.e. the external javascript source file). This has performance benefits as well (the javascript source files are usually just downloaded once by each client's browser, instead of reloading the same javascript functions within the source of every html page they visit). I have toyed around with the idea of breaking the function up into static and dynamic pieces, putting the static ones in the external source and putting the dynamic ones in the template GSP, then gluing them together, but this seems like an unnecessary hack.
Any ideas?
(edit: It may sound like the idea of dynamically generating parts of a JavaScript function, which is then downloaded once and used over and over again by the client, would be a bad idea. However, the piece which is "dynamic" only changes perhaps once a week or month, and then only very slightly. Mostly we just want this piece generated off the database, even if only once, instead of hard coded.)
An easy solution to keep your JavaScript unobtrusive is to create a JavaScriptController and map its actions "/js/*" by adding this to your UrlMappings.groovy file:
"/js/$action"{
controller = "javascript"
}
then just create an action for each dynamic JS file you want, include in in your layout <HEAD>, and presto, you've got a JS file that you can insert Grails snippets into! :)
Note: I've found that there's currently a bug in Grails that doesn't map file extensions to content-types properly, so you'll need to include <%# page contentType="text/javascript; UTF-8" %> at the top of your view files.
This is a great solution. I would like to offer a suggestion to use somthing other then a mapping of "/js/$action" because this is no longer going to allow you to access you javascript files in /web-app/js/. All your javascript files would have to be moved to a the directory your controller would point to.
I would use something like
"/dynjs/$action"
This way you still can point to files in the /web-app/js/ files with out conflict and enjoy the benifits of gsp tags in javascript files
Please correct me if I'm wrong.
Or this... have a tag/service/dynamic method that lets tags write out their JS+CSS+whatever else, to a "cache" which is used to build the JS+CSS resources by a different controller.
Full concept here: [http://www.anyware.co.uk/2005/2009/01/19/an-idea-to-give-grails-tags-esp/][1]
If you want to use models created by the controller (that rendered HTML page which reference the Javascript in which you intend to use groovy code) in the Javascript code, then you can use this technique:
This technique does not need to change URL mappings and does not require you to create extra controller.
In your view GSP add javascript as follows:
<script type="text/javascript">
<g:render template="/javascript/yourJavascriptFile"/>
</script>
In views folder create a "javascript" folder. And create a file named:
_yourJavascriptFile.gsp
You can not only use all the GSP code in your _yourJavascriptFile.gsp file, but you can also use all the models created in your controller (that is rendering the view).
NOTE: There is nothing special about javascript folder. You can name it anything you want OR use an existing view folder. This is just a matter of organizing and identifying your HTML spitting GSP from Javascript spitting GSPs. Alternatively, you can use some naming conventions like: _something.js.gsp etc.
Name your scripts like this
/wherever/the/js/files/are/thescript.js.gsp
The gsp code inside will be rendered correctly by grails. This works, but I have no idea if it's considered a Good Idea or not.
There is another way - pass in the generated code into a function that expects closures. Those closures is generated by the program of course. The generated code is of course inlined/script-tagged in the gsp page.
it may or may not work depending on the nature of the code being generated. But i suspect it will work, and if it doesnt, minor tweaking to the coding style of your javascript will definitely make it work. Though, if these 'generated' code doesnt change much, this quite overkill imo.