dust.js include partitial without trimming - javascript

I am using dust.js template engine. The main template includes a partial and the problem is that dust.js trims every line of the included template file.
For example, the main template is:
<h1>{header}</h1>
{>dust_cnt /}
The dust_cnt.dust is:
<div>
This is
the content
</div>
And I render the response by:
res.render('dust_template.dust', {header: 'TEST OK'});
The problem that there is no space between This is and the content in the output. So the output looks like:
TEST OK
This isthe content
I can't change all the contents by putting {~n} or another separator and I don't think there is any reason to do that.
On http://linkedin.github.com/dustjs/ I found the following remark GH- 166 - Added trimming of white spaces in dust templates configuration in the dust.compile ( default option is still true). But can't find the way to set set the options to avoid the trimming?
How can I make dust.js to render it the way I expect (with the spaces)?
Thank you in advance!

Ok, I found the solution :). After digging in the source code + checking the issues on the dust's GitHub I decided to use the following to prevent the formatting of the template's nodes:
dust.optimizers.format = function(ctx, node) { return node };
(Also on https://github.com/linkedin/dustjs/wiki/Dust-Tutorial#controlling-whitespace-suppression)
The default behavior is very dangerous - as it mentioned on the GitHub it can cause serious problems, for example:
<script>
//this will alert "test"
alert("this is test");
</script>
Will be rendered as:
<script>//this will alert "test" alert("this is test");</script>

This is strange and I understand that you don't want to edit your template files. However, you can workaround this in a less ugly way by adding a space at the end of the line:
<div>
This is < add space here
the content
</div>
Just for the case you cannot find a real solution for this.

Related

Fill a Javascript-Array within a Fluid foreach

i try to create a js-array with a fluid-foreach but i just get the "{obj.background.title}" output. when i put it in a console.log it works.
<script>
<f:for each="{settings.backgrounds}" as="obj" iteration="itemIteration">
{f:if(condition: itemIteration.isFirst, then: 'var backgrounds = [')}
{
src: "fileadmin/user_upload/configurator_1/background1.jpg",
isdark: true,
title: "{obj.background.title}",
},
{f:if(condition: itemIteration.isLast, then: ']')}
</f:for>
</script>
Use f:format.raw around the opening or closing curly braces. This prevents the Fluid parser from seeing it as an inline accessor.
The JavaScript-{ probably confuses the Fluid parser (off topic: what a catastrophic idea to use a JavaScript syntax token in an HTML templating engine and even forget about a clean way to escape it!).
That said it is sadly very common for JavaScript-in-Fluid to be parsed half-way or not at all or anything in between (as you just experienced). I used to use f:format.cdata() but even that has caveats. It often depends on the position of your <script> in the template so moving it more to the end of your template might help if you want to go the trial-and-error path...
I recommend passing over dynamic data to JavaScript by assigning the whole JavaScript to a template variable in your controller and outputting it via {script -> f:format.raw()}. This means ugly frontend-related stuff in your controller but it is the quickest and a very reliable way.
Or you can use a vhs-ViewHelper to convert your data to JSON and assign a HTML-data-property and process it via an external JavaScript logic. This also works reliably and is quite clean in my eyes.
In Fluid:
<x-mytag data-backgrounds="{v:format.json.encode(value: setting.backgrounds)}" />
Ideally in an external JavaScript (actually, this would even work inside Fluid):
var backgrounds = JSON.parse(
document.querySelector('[data-backgrounds]').dataset.backgrounds
)
Everybody made this experience once... I am very open to learn about other approaches.

Convert Html to document.write javascript

I've see a web page that when I try to view the source, I only see a single JavaScript statement. I searched and could not figure out how they have done that. you can do and see yourself.
The web page is: Weird Page
when I view the source I only see something like below which also looks like a comment:
<script type='text/javascript' language='Javascript'>
<!--document.write(unescape('%3C%2........................
................
How they have done that? How I can change my web page so when someone view the source it look like that?
This article may help to clarify what's happening there.
Basically, this company has encoded their entire page using standard escape characters. If you copy the bit from unencode(...) all the way to the next to last parens, and paste it into your browser console, you'll see the actual HTML content.
If you look at the source code for the page I linked, you'll see the function that converts normal text to all escape characters:
// CONVERTS *ALL* CHARACTERS INTO ESCAPED VERSIONS.
function escapeTxt(os){
var ns='';
var t;
var chr='';
var cc='';
var tn='';
for(i=0;i<256;i++){
tn=i.toString(16);
if(tn.length<2)tn="0"+tn;
cc+=tn;
chr+=unescape('%'+tn);
}
cc=cc.toUpperCase();
os.replace(String.fromCharCode(13)+'',"%13");
for(q=0;q<os.length;q++){
t=os.substr(q,1);
for(i=0;i<chr.length;i++){
if(t==chr.substr(i,1)){
t=t.replace(chr.substr(i,1),"%"+cc.substr(i*2,2));
i=chr.length;
}
}
ns+=t;
}
return ns;
}
What is happening is pretty much what it sounds like. The server is serving a single <script> element, which contains an HTML comment to make it easier for browser that don't support JS (read more here: Why does Javascript ignore single line HTML Comments?), and in the comment it's writing to the document the unescaped version of the string, which is sent escaped.

Replace / restrict non-standard characters in CKEDITOR

I have a CKEDITOR instance (version 4.5.7) into which users input content. This content posts to a database field with the collation SQL_Latin1_General_CP1_CI_AS.
The problem comes when a user pastes text from Word or a similar rich-text editor. Two characters in particular get malformed when they hit the database: ” (”) and – (–).
I have already set config.entities to false to prevent the characters from being converted into their HTML equivalents. Now I'm looking for a place where I can intercept the process to find/replace any offending characters. Although the javascript for this sort of thing is easy enough ( text = text.replace('”', '"') ), I'm not sure where to put it in order to make this happen. I've tried placing it in various places within the CKEDITOR.htmlParser.basicWriter function, but nothing so far has worked.
This seems like it would be a fairly common problem - is there perhaps a way to set collation on the editor so it matches the database?
Thank you for any advice.
I kept plunking away in the basicWriter function until eventually I was surprised to find one place that actually does work. Basically, this is the process I used to solve this problem without editing ckeditor.js
Download and open an uncompressed version of the ckeditor.js file.
Locate and copy the entire CKEDITOR.htmlParser.basicWriter function into the bottom of your config.js file. This basically redefines the function, overriding the real one but allowing us to make customizations to it without necessarily breaking future updates.
In the copied function within config.js, locate the getHtml section and customize the html variable before it gets returned. Below is a template to help you locate this section
getHtml: function( reset ) {
var html = this._.output.join( '' );
// this is where we can replace individual characters or make other
// customizations
html = html.replace('”', '"');
html = html.replace('–', '-');
if ( reset )
this.reset();
return html;
}

java script failing because of white spaces caracters

I have in my views some code as this
$(".someclass").hover(function(){
$(this).append("#{render "layouts/show_some_file", title: "some_file"}");
});
The show_some_file.html.haml file consists of two nested basic divs
In my browser, I get
$(".someclass").hover(function(){
$(this).append("<div>
<div>some text</div>
</div>
");
});
On hover, I get in my chrome console SyntaxError: Unexpected token ILLEGAL. I deleted my white spaces in my console, and it worked. But how to clean the white spaces in my ruby rendering ?
I am not entirely certain it will help, but you probably should use the "<%= render ... %>" variant rather than the #{}
And since it's for javascript, the correct way would be "<%= escape_javascript(render ...) %>"
If using HAML, substitute the ERB for however the markup is written there.
Edit: might be
!= "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");"
Since the result of your {#render} is HTML, and although you might use it once, it might make more sense to store it in HTML, and retrieve it with JavaScript. Mimicking templating, here's an example of what I mean:
<script id="my_render" type="text/template">
#{render "layouts/show_some_file", title: "some_file"}
</script>
<script type="text/javascript">
$(document).ready(function () {
var render_content = $("#my_render").html();
$(".someclass").hover(function () {
$(this).append(render_content);
});
});
</script>
It kind of acts like a template. You use a script tag, but you set its type to something that doesn't cause it to be executed. Since script tags are never visible on a page, you would never have visual problems...unlike doing this inside of a div...the HTML is then "separate" from the rest of the page.
I'm sure there's a better solution using Ruby, but if you're outputting a partial view to JavaScript code, I'd have to ask why. It makes more sense to me to put in a "template". I understand this doesn't directly answer your immediate question, but it's an alternative :)
In fact, I got it, one of the right thing to do is :
$("someclass").hover(function(){
$(this).append("#{escape_javascript render "layouts/show_some_file", title: "some title"}");
});
The obvious thing to do is edit layouts/show_some_file & remove white space. It's not really whitespace that's the problem, but carriage returns. Javascript doesn't like multi-line strings. If I knew Ruby, I could probably write a regex that gets rid off stuff like "\r\n", which is carriage return line feed in PHP/C syntax.

JavaScript multiline strings and templating?

I have been wondering if there is a way to define multiline strings in JavaScript like you can do in languages like PHP:
var str = "here
goes
another
line";
Apparently this breaks up the parser. I found that placing a backslash \ in front of the line feed solves the problem:
var str = "here\
goes\
another\
line";
Or I could just close and reopen the string quotes again and again.
The reason why I am asking because I am making JavaScript based UI widgets that utilize HTML templates written in JavaScript. It is painful to type HTML in strings especially if you need to open and close quotes all the time. What would be a good way to define HTML templates within JavaScript?
I am considering using separate HTML files and a compilation system to make everything easier, but the library is distributed among other developers so that HTML templates have to be easy to include for the developers.
No thats basically what you have to do to do multiline strings.
But why define the templates in javascript anwyay? why not just put them into a file and have a ajax call load them up in a variable when you need them?
For instantce (using jquery)
$.get('/path/to/template.html', function(data) {
alert(data); //will alert the template code
});
#slebetman, Thanks for the detailed example.
Quick comment on the substitute_strings function.
I had to revise
str.replace(n,substitutions[n]);
to be
str = str.replace(n,substitutions[n]);
to get it to work. (jQuery version 1.5? - it is pure javascript though.)
Also when I had below situation in my template:
$CONTENT$ repeated twice $CONTENT$ like this
I had to do additional processing to get it to work.
str = str.replace(new RegExp(n, 'g'), substitutions[n]);
And I had to refrain from $ (regex special char) as the delimiter and used # instead.
Thought I would share my findings.
There are several templating systems in javascript. However, my personal favorite is one I developed myself using ajax to fetch XML templates. The templates are XML files which makes it easy to embed HTML cleanly and it looks something like this:
<title>This is optional</title>
<body><![CDATA[
HTML content goes here, the CDATA block prevents XML errors
when using non-xhtml html.
<div id="more">
$CONTENT$ may be substituted using replace() before being
inserted into $DOCUMENT$.
</div>
]]></body>
<script><![CDATA[
/* javascript code to be evaled after template
* is inserted into document. This is to get around
* the fact that this templating system does not
* have its own turing complete programming language.
* Here's an example use:
*/
if ($HIDE_MORE$) {
document.getElementById('more').display = 'none';
}
]]></script>
And the javascript code to process the template goes something like this:
function insertTemplate (url_to_template, insertion_point, substitutions) {
// Ajax call depends on the library you're using, this is my own style:
ajax(url_to_template, function (request) {
var xml = request.responseXML;
var title = xml.getElementsByTagName('title');
if (title) {
insertion_point.innerHTML += substitute_strings(title[0],substitutions);
}
var body = xml.getElementsByTagName('body');
if (body) {
insertion_point.innerHTML += substitute_strings(body[0],substitutions);
}
var script = xml.getElementsByTagName('script');
if (script) {
eval(substitute_strings(script[0],substitutions));
}
});
}
function substitute_strings (str, substitutions) {
for (var n in substitutions) {
str.replace(n,substitutions[n]);
}
return str;
}
The way to call the template would be:
insertTemplate('http://path.to.my.template', myDiv, {
'$CONTENT$' : "The template's content",
'$DOCUMENT$' : "the document",
'$HIDE_MORE$' : 0
});
The $ sign for substituted strings is merely a convention, you may use % of # or whatever delimiters you prefer. It's just there to make the part to be substituted unambiguous.
One big advantage to using substitutions on the javascript side instead of server side processing of the template is that this allows the template to be plain static files. The advantage of that (other than not having to write server side code) is that you can then set the caching policy for the template to be very aggressive so that the browser only needs to fetch the template the first time you load it. Subsequent use of the template would come from cache and would be very fast.
Also, this is a very simple example of the implementation to illustrate the mechanism. It's not what I'm using. You can modify this further to do things like multiple substitution, better handling of script block, handle multiple content blocks by using a for loop instead of just using the first element returned, properly handling HTML entities etc.
The reason I really like this is that the HTML is simply HTML in a plain text file. This avoids quoting hell and horrible string concatenation performance issues that you'll usually find if you directly embed HTML strings in javascript.
I think I found a solution I like.
I will store templates in files and fetch them using AJAX. This works for development stage only. For production stage, the developer has to run a compiler once that compiles all templates with the source files. It also compiles JavaScript and CSS to be more compact and it compiles them to a single file.
The biggest problem now is how to educate other developers doing that. I need to build it so that it is easy to do and understand why and what are they doing.
You could also use \n to generate newlines. The html would however be on a single line and difficult to edit. But if you generate the JS using PHP or something it might be an alternative

Categories