Using jquery-template {{wrap}} to wrap plain text - javascript

With jQuery templates, I'm trying to use the {{wrap}} template tag to wrap the results of another template. This second template renders plain text, not HTML. I currently get an empty string where I expect to get the plain text rendered by the wrapped template.
If I surround the plain text with some HTML elements, like a <div> tag, then everything works fine, but I get the <div> rendered into the results. I would be fine creating a dummy tag around my contents in order to get the {{html}} tag to work, but I wouldn't want it in the rendered results.
I will also want to use this same wrapper, if possible to wrap templates that actually do produce HTML as well, so it would be good if the same wrapper template can work for both cases.
Here is my code:
$("#x").html($("#myTmpl").tmpl());
<div id="x" />
<script id="myTmpl" type="text/x-jquery-tmpl">
The following wraps some non-HTML content: {{wrap "#wrapper"}} help {{/wrap}}
</script>
<script id="wrapper" type="text/x-jquery-tmpl">
<table>
<tbody>
<tr>
<td>
Wrapped content: {{html $item.html}}
</td>
</tr>
</tbody>
</table>
</script>
This code can be found at this jsFiddle: http://jsfiddle.net/bernardchen1/BYdeg/

I eventually found a solution. I created use a dummy tag to wrap the plain text (or even the html that is produced by other templates), and then I created a function that I pass into the template invocation that can strip out the dummy tag. I invoke it like this: {{html $data.clean($item)}}. The "clean" function needs access to the content being returned by the inner template, which I found to be $item.wrapped[0]. Once I had that content, I could get its inner html to return from the clean function.
I'm concerned about whether I'm supposed to be accessing $item.wrapped though.
Ultimately, I may just try refactoring my code to not require this dummy tag and the cleaning function.
This solution can be found here: http://jsfiddle.net/bernardchen1/nmzWt/
Edit: there is another solution to call appendTo to attach the template html to another DOM element, and then grab the data back out.

Related

JQuery insertAfter in chrome & safari causes the content to be inserted as String

i'm using jQuery to insert rows into a table dynamically. the row itself is a (text-) template, which gets some stuff inside replaced, is then 'casted' to an jQuery DOM node. While this works fine in Firefox and IE:
jQuery(jQuery.parseHTML(node)).insertAfter("#imgTable tr:last()");
Chrome and Safari won't insert the node, but insert the HTML as String. This way i'm not gaining a row, bug a solid block of html sourcecode...which is an UX disaster :)
very simple reproduction:
http://jsfiddle.net/288sp1qb/4/
...i already found out that the source of the error is that i store my templates inside a <noscript> tag. I have to do that, since all other tags that i know of are interpreted, so most browsers either remove the <tr> and <td> tags or otherwise modify the content.
storing the template in a variable isn't an option either, since the template already contains some backend generated data.
so the actual question is: how can i get webkit browsers to interpret the data after inserting them? or: how should i store the templates otherwise?
HTML Code -
<table id="table">
<tr>
<th>bsp.</th>
</tr>
</table>
<noscript id="tpl" style="display:none">
<tr><td>%VAR%</td></tr>
</noscript>
jQuery Code -
var node = $("#tpl").text();
node = node.replace("%VAR%","test");
$($.parseHTML(node)).insertAfter("#table tr:last()");
JSFiddle - http://jsfiddle.net/Ashish_developer/s35ppva8/
This solution is working fine in all browsers.

create html templates textarea or script or div or else

I have seen html templates created using any of the following tags
<textarea>
<script>
<div>
Which one is better and why?
Which of the following way of creating html templates is better and y?
CSS:
.template {
display: none;
}
textarea :
<textarea class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</textarea>
script :
<script type="text/html" id="tmpl1">
<div>adfsdfsdfs</div>
</script>
div :
<div class="template" id="tmpl1">
<div>adfsdfsdfs</div>
</div>
I had faced problem with script tag here
i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub
http://mustache.github.com/
definitely my favorite way to do html templating
They are all poor choices.
textarea is designed to accept user input
div elements are designed to present content to the user
script elements are designed to hold programs
If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.
Alternatively, store the template in a data-* attribute on an appropriate element.

re-format code in tinymce when I use this to create template

I use tinymce to edit template, sometime I put some regular expression inside table tag as below:
<table>
<tr><th>ID</th><th>Name</th></tr>
{table_rows}
</table>
I want to save this template to use in other page but tinymce will move {table_rows} to outside table tag as:
{table_rows}
<table>
<tr><th>ID</th><th>Name</th></tr>
</table>
How can I prevent reformat code in tinymce so I can save free HTML code?
Problem here is that you have put your {table_rows} outside a html tag.
Tinymce wraps such text inside the appropriate html tag.
You should wrap your code snippet inside a valid tag.

Mustache JS Templating - How do I embed a variable in a script tag string?

I just started using Mustache and I like it so far, but this has me perplexed.
I am using the GitHub gist API to pull down my gists, and part of what I want to do is include the embedding functionality into my page. The problem is Mustache seems to not want to have anything to do with my dynamic script tag.
For example, this works fine:
<div class="gist-detail">
{{id}} <!-- This produces a valid Gist ID -->
</div>
Additionally, this works perfect:
<div class="gist-detail">
<script src='http://gist.github.com/1.js'></script> <!-- Produces the correct embed markup with Gist ID #1 -->
</div>
If I try to pull these together, something goes terribly wrong:
<div class="gist-detail">
<script src='http://gist.github.com/{{id}}.js'></script> <!-- Blows up! -->
</div>
Chrome Inspector shows this:
GET https://gist.github.com/%7B%7Bid%7D%7D.js 404 (Not Found)
... which looks like to me something is weird with escapes or whatnot, so I switch over to the raw syntax:
<div class="gist-detail">
<script src='http://gist.github.com/{{{id}}}.js'></script> <!-- Blows again! -->
</div>
And I get the same result in Inspector:
GET https://gist.github.com/%7B%7B%7Bid%7D%7D%7D.js 404 (Not Found)
How do I get the correct values to embed in the script tag?
EDIT
I am injecting the template as follows (in document.ready:
function LoadGists() {
var gistApi = "https://api.github.com/users/<myuser>/gists";
$.getJSON(gistApi, function (data) {
var html, template;
template = $('#mustache_gist').html();
html = Mustache.to_html(template, {gists: data}).replace(/^\s*/mg, '');
$('.gist').html(html);
});
}
The actually template is inside of a ruby partial, but it is wrapped in a div (not a script tag, is that a problem?) (that's hidden):
<div id="mustache_gist" style="display: none;">
{{#gists}}
<!-- see above -->
{{/gists}}
</div>
I assume a div is ok rather than a script because in either case, I'm pulling the .html(). Is this a bad assumption?
To avoid automatic escaping in Mustache use {{{token}}} instead of {{token}}.
It seems like your template is in HTML and trying to retrieve the template using html() results in a pre-URL-escaped template to be returned. Try placing your template inside a <script type="text/html"> tag instead.
When you embed your template inside an HTML element that excepts more HTML elements as children, it may get processed by the browser as HTML. Escaping may occur. By using a <script> tag with a non-script content type, you're basically telling the browser not to touch your template.
It looks like your script is getting requested before Mustache has a chance to update the src property. What you want to do is define the template in a way that it's not parsed as part of the DOM. A common approach is to define your template inside of a <textarea> tag. This will preserve formatting and prevent character escaping.
<textarea id="gist-detail-template" style="display:none">
<script src='http://gist.github.com/{{id}}.js'></script>
</textarea>
Now, to instantiate the template:
var template = $('#gist-detail-template').val();
var html = Mustache.to_html(template, yourTemplateData);
Here's an official example: http://mustache.github.com/#demo

Appending HTML to end of body using javascript

I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );

Categories