I have an Ember application running with hadlebars. I have several ember templates in my HTML page, but I ran into a slight dilemma - I can't escape an HTML code within script tag. I am looking to insert a non-working raw HTML into script tag for illustrative purposes. Will it be of help by using .hbs file method? I would prefer not to use .hbs method.
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
Thank you.
You can do this exactly the same way you would do it in normal HTML: escape the HTML entities:
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
Related
Once page load google tends graph is getting load under trendsBlock class. In below code once after calling next_fun() complete html code getting render with graph. I need to render inside of trendsBlock.
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1173_RC01/embed_loader.js"></script>
<div class="trendsBlock">
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"});
</script>
</div>
<button onclick="next_fun()">Click to next trends</button>
<script type="text/javascript">
function next_fun(){
//innerHTML in to class trendsBlock
//?
}
</script>
</body>
</html>
The renderExploreWidgetTo method allows one to embed the charts to any HTML element.
You can look at the below sample code to understand.
function next_fun(){
var divElem = document.getElementById('sampDiv');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
}
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
<div id='sampDiv'>
</div>
<button onclick="next_fun()">Click to next trends</button>
</body>
</html>
P.S: when I am running the above code in StackOverflow's internal compiler/browser it throws an error.
Error img!!
But works fine otherwise.
I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>
I recently decided to try Ember.js.
I set up a small application, but I can't get something to work.
I have a file app.html
<!doctype>
<html>
<head>
...
</head>
<body>
<script type="text/x-handlebars">
...
</script>
</body>
</html>
Now, of course, this doesn't render anything. I include handlebars.js, ember.js, and app.js and now then everything renders properly.
The problem is that when I try to add something with curly braces, the output is blank. For example, if I set some variables in my JS files and want to display it in my app, like <h1>{{title}}</h1>, I get <h1></h1>. When I try to put {{input value="Username"}}, nothing gets displayed.
I get no error messages, except when I use closing tags. For example, this
{{#link-to "http://google.ca"}}Link{{/link-to}}
Will make my whole web page simply display
line 117: interleaved closing tag: link-to
I have no idea what is wrong. Even googling the error message doesn't help much.
Any hint?รง
UPDATE
This code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Link
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Renders a blank page with this error message:
line 36: interleaved closing tag: each
I'm not sure that's normal.
link-to is meant for ember routes only. (http://emberjs.com/guides/templates/links/)
In your case I would just write the html for the link in the template directly.
Here is a small sample ember.js app with the google.ca link, I have a feeling that your html may not be setup correctly with an outlet and a template:
http://emberjs.jsbin.com/qivunivabo/3/edit
I found the problem and this is really stupid.
My HTML files are delivered by a framework that uses Mustache as its template engine (server side) and therefore it renders all the {{something}} tags before sending the output to the broswer.
:/
So I'm tossing around an idea for a presentation for work to try to show the power of Ember. I planned on starting at some of the primitives and showing that things can technically stand on there own, but Ember works best when you adhere to patterns. Anyways I would like to just render a view. In the Ember Guides under view there is this example:
View
var view = Ember.View.create({
templateName: 'say-hello',
name: "Bob"
});
view.appendTo('#container');
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.7.prod.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="container"></div>
<script type="text/x-handlebars" id="say-hello">
Hello, <b>{{view.name}}</b>
</script>
</body>
</html>
http://jsbin.com/EPuwApE/3/edit
This does not work. Why?
You have a few issues.
When you create a template, name it with the data-template-name attribute.
In order for your view to find the template, you must create an Ember.Application even if you don't use it.
Alternatively, if you'd prefer not to do the above, you can inline your template in the view, compile it, and set it to the view's template property. I commented it out as an example.
Check out this updated jsbin.
You missed to create an instance of Ember application like
App = Ember.Application.create({
});
Working Bin
Is it possible to extend a base template with another template in Smarty?
I know this is possible in Django using the {% entend %} tag. Is there an equivalent (or workaround) in Smarty?
Thanks
Although this question is a bit old, I thought that maybe someone looking for this information as of august 2011 would benefit to know that this can be done now with Smarty 3.
Example With Inheritance
layout.tpl
<html>
<head>
<title>{block name=title}Default Page Title{/block}</title>
</head>
<body>
{block name=body}{/block}
</body>
</html>
mypage.tpl
{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=body}My HTML Page Body goes here{/block}
output of mypage.tpl
<html>
<head>
<title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>
Taken verbatim from: http://www.smarty.net/inheritance
There is no build-in template inheritance in Smarty. But you can do similar thing with {include} and {capture}.
Your page template can look like:
{capture assign="context"}
<h2>Here is my page</h2>
{... some other smarty suff here ...}
{/capture}
{assign var="title" value="Just simple title text here"}
{include file="base.tpl"}
And base.tpl can look like following:
<html>
<title>{$title}</title>
<body>
{$context}
</body>
</html>