I have no clue if this is even possible, but I have spent a lot of time trying to figure out how to do it. I have an array of string values in my .js file which include html tags. An array similar to this:
var values = [
<h1>Introduction</h1>,
<h3>Words</h3>,
<p>More words</p>
]
I am attempting to have them inserted into a handlebars template, but I can't seem to find a way to do it. I have tried using a variation of a {{ #each _ }} method for node.js to no avail. Please let me know how to do this, or if it's even possible.
Here's my current code. I am trying to just get the array of data to display when it's hard-coded in the html. I am getting no errors, but the code does not display.
eSOMS Tutorial
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="c://node.js/server.js"></script>
</head>
<body>
<script id="content-template" type="text/x-handlebars-template">
{{#each data}}
{{this}}
{{/each}}
</script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
'<h1>Introduction</h1>',
'<h3>The Enterprise Shift Operations Management System</h3>',
'<p>The Enterprise Shift Operations...</p>',
'<p>The purpose of this tutorial is to...</p>'
];
if(!Handlebars.templates){ Handlebars.templates = {}; }
Handlebars.templates.full = Handlebars.compile($("#content-template").html());
$('#output').html(Handlebars.templates.full({data: data}));
});
</script>
<div id='output'></div>
</body>
</html>
There's much more code but I think I've got everything relevant.
Related
I'm looking for a way to select and load a javascript from the html file arguments. The html file is called as follows:
OSM_Map.html?year=2017 or OSM_Map.html?year=2018
In the OSM_Map.html file there is the following code in the header:
<head>
.....
<script language="JavaScript" type="text/javascript" src="LatLonDB_2017.js"></script>
<script language="JavaScript" type="text/javascript" src="LatLonDB_2018.js"></script>
....
</head>
There is no problem to get the year argument from the argument list, but how can I load depending on the year argument just one of these .js files?
As somebody said, "yes, you can":
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loadjs/3.5.5/loadjs.min.js"></script>
<script>
var myparameter = new URL(location.href).searchParams.get("year");
loadjs( "LatLonDB_" + myparameter +".js" );
</script>
</head>
<body>
<h1>Titulo</h1>
</body>
</html>
Been the URL something like: http://test.html?year=2018
BUT! not sure if this will work in every browser.... the "searchParams" is not universally compatible.
Thanks to #spencer.sm in this question How to get the value from the GET parameters?
and of course, loadJS function.
The LatLonDB_xxxx.js script still doesn't load. I'm not sure why not. Cannot you load a .js file from another directory than where the .html file is? Otherwise the load may be too late. Scripts following the LatLonDB_xxxx.js script use this DB.
The original code is like this:
<html>
<head>
...
<script language="JavaScript" type="text/javascript" src="../DataBases/LatLonDB_20xx.js"></script>
<script language="JavaScript" type="text/javascript" src="../DataBases/LatLonDB_utils.js"></script>
<script language="JavaScript" type="text/javascript" ...more scripts using the LatLonDB_20xx.js></script>
...
</head>
...
</html>
The intention is to replace the 20xx by the correct year: 2000, 2001, etc. There is no problem to get the correct year from the query parameters.
Currently I am using flask with handlebars for javascript. For some reason I am getting 'define not defined' and 'handlebars is not defined'. Can someone give me some insight as to why?
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.amd.js" integrity="sha256-cEkEXgRFO7XYdrN1VzwFPP5zTTOxXJ2Xo6HoZos61Cs=" crossorigin="anonymous"></script>
</head>
<body>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
JS
$(function(){
var theData = {headerTitle:"Shop Page",
weekDay:"Wednesday"};
var theTemplateScript = $("#header").html();
var template = Handlebars.compile(theTemplateScript);
var html = template(theData);
console.log(html);
});
This is a build issue with the handlebars.js file.
If you look into the file you will see a lot of relative paths to different files as well as import statements.
Use this file to make it work -
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js
I am new to Handlebars JS and just trying to understand them.
I am trying to implement handlebars on a data that contains array of hashes.
Here is my script:-
<div id="test"></div>
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<h2>{{body}}</h2>
</script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script>
$(document).ready(function (){
var source = $("#template").html();
var template = Handlebars.compile(source);
var context = [{title: "ABC",body: "DEF"},{title: "GHI",body:"JKL"}];
console.log(context);
var ht = template(context);
console.log(ht);
$("#test").html(ht);
});
</script>
Nothing is displayed on the output
How to use the handlebars template to access an array of hashes. Ex- variable context in the above script.
Can we use handlebars only on hashes ?
Can anyone please explain me this.
Thanks
You can iterate through collection using {{#each}} helper. In your case it would be something like this:
{{#each this}}
<h1>{{title}}</h1>
<h2>{{body}}</h2>
{{/each}}
Of course we can use it only on hashes - just try.
You might find reading this useful: http://handlebarsjs.com/builtin_helpers.html
I hope your script tag doesn't look like in your post and it actually doesn't lack of "http" part
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
I have been trying to combine these two codes to be able to opt-in to two of my campaign lists at the same time. But I have not been able to. Whenever I try either one or the other will receive my opt-in, but not both. Please help me with this.
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=624607"></script>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=624609"></script>
Different combinations I have tried:
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=624607, http://app.getresponse.com/view_webform.js?wid=624609"></script>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=624607", "http://app.getresponse.com/view_webform.js?wid=624609"></script>
<script type="text/javascript" src={"http://app.getresponse.com/view_webform.js?wid=624607, http://app.getresponse.com/view_webform.js?wid=624609"}></script>
<script type="text/javascript" src={http://app.getresponse.com/view_webform.js?wid=624607, http://app.getresponse.com/view_webform.js?wid=624609}></script>
This is not something you can do on your own; it's something GetResponse must support in order for this for work. Also as #Barmar said, you cannot add multiple URLs to a single <script> tag.
From a short glance at the GetResponse FAQs, it does not seem that they do support what you are trying to achieve. Contact their support to be sure.
I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.
You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>