I want to fill a script type="text/html tag with a Meteor template.
So, this is an odd thing to do, I know. Half the reason I want to do this is because Cloud9 can't tell the difference between JS script tags and HTML script tags, and its syntax highlighting and tag-completion breaks when you try to write HTML in script tags. The other half of me is just curious to see if this is possible, because an ugly-as-sin workaround exists.
So this:
<body>
<script type="text/html" id="test">
{{> test}}
</script>
</body>
<template name="test">
<span>Test</span>
</template>
Produces this:
<script type="text/html" id="test">
<!--label:YRgyaMH8-->
</script>
Anyone have a way to force it to render the template, instead of what looks like evaluate the name as a comment?
Submitting another answer b/c I'd like to keep my previous one just for the records. I think this approach will work better though.
Inside your html, you're going to define two sections. The first is where you're going to place your template code. It will go inside a comment inside a plain div tag. The second is where the template will be placed for Knockout to consume. It looks like this:
<template name="koTemplate">
<div id="myTemplate">
<span>Here is my template with children</span>
</div>
<script type="text/html" id="test"></script>
</template>
Then in your client JS code, you're going to add a callback to run when the template is rendered
Template.koTemplate.rendered = function () {
// Get the first node, then get the content inside of it
var templateHtml = this.firstNode.innerHTML;
// Remove the element so it doesn't get rendered
this.firstNode.parentNode.removeChild(this.firstNode);
// another option is to surround the contents inside the template w/comments, but that loses syntax highlighting
// Get the target node for placing the template in
var templateNode = this.lastNode;
// place the content from the original node to the target node
templateNode.innerHTML = templateHtml;
};
This will basically get the content of the template, remove the template, then place it inside the script tags. The result will look like:
<script type="text/html" id="test">
<span>Here is my template with children</span>
</script>
I would suggest moving away from using the script tag and instead use some other generic tag that Cloud9 won't treat as JS and Meteor won't fudge with. Using the example in my comment on the question, it would look something like this:
<div id="template">
<!--<span>test</span>-->
</div>
And in your JS you would parse that:
var template = document.getElementById('template').firstChild.nodeValue,
result = parseTemplate(template, values);
That's the basic idea. You'd have to convert it over to Knockout's template parsing after getting the result.
Related
I am including a script in .hbs file, but every time I assemble grunt assemble this .hbs file, the hbs template inside the script is ignored in the HTML output.
This is my .hbs file
<script id="myTemplate1" type="text/x-handlebars-template">
{{#each}}
<div class="sample">
....
</div>
{{/each}}
</script>
I assembling the above .hbs file using grunt assemble and it just ignores all the content inside the script tag and I could see only the following in the HTML output
<script id="myTemplate1" type="text/x-handlebars-template">
</script>
What's wrong here? I tried to have the script as a separate JS file but didn't work? I also tried to include the script in the HTML output but every time I assemble, it overwrites and I get only the empty tags.
The #each block helper requires an array passed to it to iterate over. It would look something like...
<script id="myTemplate1" type="text/x-handlebars-template">
{{#each templatesArray}}
<div class="sample">
....
</div>
{{/each}}
</script>
See the Handlebars Documetation for more examples.
You should also check out Handlebars-Helpers, made by the creators of Assemble, it contains a whole bunch of useful helpers.
You can use the things that i mention below. I realized that that method would contradict the foundations of Handlebars. Instead, I added the following to my controller:
var scripts = [{ script: '/js/myTestScript.js' }];
res.render('contact', { title: 'Kontakt', scripts: scripts });
And in my layout it looks like this:
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
{{#each scripts}}
<script src="{{script}}"></script>
{{/each}}
How do I get the html content of a template? For example, I have the following template:
<template name="test">
<div id="example">
<strong>This is a test.</strong>
</div> <button id="btn">Get</button></template>
I need the event click of button the HTML contents of the div # example is captured. it possible?
You could use JQuery (already built into meteor) for this
var html = $('#example').html();
As of Meteor 1.x, you can use Blaze.toHTML(). It returns the HTML of the given Template as a String.
If you assign the click event using Template.test.events you should have all the data that template describess in your "this".
I have created a Wordpress theme but am having a problem with the page loading.
When I move between pages there is one table (with 2 images) in the header that stays behind on the page when all the other elements have been unloaded.
Any ideas how can I fix this so that this image only shows with the rest of the page?
see http://thetaonline.co.za/newWeb/ and click on each of the menu items to see the image that remains (loads before the rest of the page).
Your HTML code is messed up. Its opening a <table> before the <html> and closing after the </html>. This stuff should go inside the <body>...</body> area.
Thats basically the reason why its being shown before the page completes to load, because the external resources being called with <script src=... or <link href=... will hang the page rendering at this point until they are loaded. Thats the reason why this stuff is usually called before everything, inside the <head>...</head> block where there is (or should be) still nothing defined for display.
Sinse you are doing it wrong, it will show what is ready for rendering -- basically just that image -- until the rest is loaded.
As of putting the external resource calls inside the <head> block, it seems to be correct, so basically you only have to bring that table to the right place to make the page display properly.
I see there are also some typos that may cause issues, like <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" missing the > in the end etc. You should review your code.
try to use jquery and do something like this:
$(function() {
$.preload(["image1.png", "image2.png"]);
}
edit: You should rather take a look at Havenard's answer!
I don't know, if this is a good idea (I guess it is not!), but you could actually hide those images first and then show them with jquery after the page is loaded completely:
<table width="35" border="0" cellspacing="0" cellpadding="0" style="display:none" id="specialimages">
<!-- your 2 images in here -->
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#specialimages').show();
});
</script>
This problem is similar to what is described in Execute Javascript inside a partial view in ASP.NET MVC
The below piece of code in index.cshtml is working fine...
<label for="locationOfSearch"> in :</label> #Html.TextBox("locationOfSearch")
<input type="submit" value="Search" style="background-color:Green"/>
#section JavaScript {
<script type="text/javascript">
$(document).ready(function () {
$("#locationOfSearch").autocomplete({
source: '#Url.Action("AutocompleteAsyncLocations")'
})
});
</script>
}
But when I copy and paste the above code and the respective script files to a another view and then in index.cshtml if I call Html.Partial(new view name), Autocomplete is not working...
Kindly let me know how I solve it without much modification...
You cannot use sections in partial views. They simply don't work. So you will have to keep the #section JavaScript in the view in order to register scripts and then render the partial which will contain only the markup. You could also write custom helper methods to achieve this as shown in this answer.
Partial views need to have a reference to all scripts, even though you've already referenced it in the master/layout page. Create a partial view (ex: _Scripts.cshtml) and put all of your scripts and stylesheet references in it. Then call this partial view in every view:
#Html.Partial("_Scripts")
I have an aspx page which shows preview of html-email. The html email comes from DB as text. This is assigned to a div.
Now i have a base tag which carries a url which is dynamic based on the DB server name.
When i assign the html from DB to the div, the base for the relative url of the images inside the html are taking the base url of the page instead of the base url from the html text.
basically,
the page is rendered as,
<html>
....
<div> <html>
<head>
<base href="dynamic url" />
</head>
<body>
<img src="images/header.jpg" />
.....
</body>
</html>
</div>
.....
</html>
The 2nd html comes from DB.
How to force the dynamic url of the img tag to take the base url from base tag.
Now the img src is coming as, page_url/images/header.jpg. I want it as dynamic_url/images/header.jpg.
I think you should be able to do this in two different methods. First replace the text "images/" to your dynamic URL on the server side before you assign the email HTML to the container. It should be straight forward whatever language you are using.
If that is not possible then you can do that on client side with JQuery. The code below loops through all the img tags on the page and replaces to a path you specify. This does not actually change the source code but it renders the images with the new path.
$(document).ready(function(){
$("img").each(function(i) {
$(this).attr('src', $(this).attr('src').replace('old_path', 'new_Path'));
});
});