<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<script id ="ajaxTemplate" type="text/x-handlebars-template">
{{#each}}
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
{{/each}}
</script>
</ul>
<script>
$(document).ready(function(){
//document.write("Hello");
var data = [{
"name":"Name2",
"date":"12/12/1999"
}, {
"name":"Name1",
"date":"12/12/1999"
}]
var source = $.trim($('#ajaxTemplate').html());
var template = Handlebars.compile(source);
var html = template(data);
//document.write(html);
$('ul').append(html);
});
</script>
</body>
</html>
Can anyone tell me what is the mistake in the above code. I am not able to append the compiled JS code to DOM.
{{#each}} can not be used without parameter.
You can use the tip {{#each .}} or simply wrap your array in an object like this
<script id ="ajaxTemplate" type="text/x-handlebars-template">
{{#each items}}
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
{{/each}}
</script>
</ul>
<script>
$(document).ready(function(){
//document.write("Hello");
var data = [{
"name":"Name2",
"date":"12/12/1999"
}, {
"name":"Name1",
"date":"12/12/1999"
}]
var source = $.trim($('#ajaxTemplate').html());
var template = Handlebars.compile(source);
var html = template({items});
//document.write(html);
$('ul').append(html);
});
</script>
The below one works perfectly, see my change to the code. {{#each data}} references data.data and expects it to be an array to loop through.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<script id ="ajaxTemplate" type="text/x-handlebars-template">
{{#each data}}
<li>
<span class="meta">{{this.name}} on {{this.date}}</span>
</li>
{{/each}}
</script>
</ul>
<script>
$(document).ready(function(){
//document.write("Hello");
var data = {data:[{
"name":"Vinoth",
"date":"12/12/1984"
}, {
"name":"Kevin",
"date":"7/23/1984"
}]};
var source = $.trim($('#ajaxTemplate').html());
var template = Handlebars.compile(source);
var html = template(data);
//document.write(html);
$('ul').append(html);
});
</script>
</body>
</html>
Working example:
http://jsbin.com/ecazege/1
Also you can use {{#each this}} and then you don't need to alter the data at all on what i did. using this is more readable way.
Below fiddle using this.
http://jsbin.com/ecazege/6
You need to pass in the item to be iterated over when calling each. In this case, you would be using {{#each data}}
Related
Have tried every solution on stackoverflow but it does not solve my problem,
my output is not showing.
The output does appear in logs and everywhere else but due to some reason angular is unable to render it.
In my real scenario i will be receiving data from a server and i have mimicked the object structure i will be getting in the 'controller.js' file
Html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller.js
var app=angular.module('application', []);
app.controller("controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
Application.js
var app = angular.module("application", []);
app.run(function(){
console.log("App running!");
});
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="_controller">
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</div>
<script>
var app=angular.module('application', []);
app.controller("_controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
app.run(function(){
console.log("App running!");
});
</script>
</body>
</html>
Syntax error in console.log, missing leading quote on App running.
//script.js
var app = angular.module("application", []);
app.run(function() {
console.log("App running!");
});
app.controller("controller", function($scope) {
var d = [{
'Task': 'Say hi!',
'Status': 'failed'
}];
$scope.t = d[0].Task;
$scope.s = d[0].Status;
console.log("Task", $scope.t);
console.log("Status", $scope.s);
});
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You have mistake in this line
console.log(App running!");
You forgot one "
that should be
console.log("App running!");
Solving that your code works fine.
I am really struggling with Handlebars.js. The below example is the extent of my test html document.
I just cannot work out why the html variable is not writing the desired context content is not providing an output:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
title: "My New Post",
body: "This is my first post!"
};
var html = template(context);
</script>
</body>
</html>
so I have this code which displays data from elastic search, the purpose is to get some data, compute a average and display a red or green button.
I'm just starting.
<!doctype html>
<html ng-app="EsConnector">
<link rel="stylesheet" href="styles/main.css">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script><!-- // a recuperer -->
<script src="scripts/controllers/elasticsearch.angular.js"></script>
<script src="scripts/controllers/es_connect.js"></script>
</head>
<script type="text/javascript">
function addTpsGeocodage(p1) {
alert(p1);
}
</script>
<body>
<title>Dashboard</title>
<h1 align="center">Dashboard </h1>
<hr>
<h3>Services Externes</h3>
<div ng-controller="QueryController">
<div >
<table>
<tr ng-repeat="item in hits">
<td>
{{item['_source']['tpsGecodage']}}
<script>
addTpsGeocodage(item['_source']['tpsGecodage']);
</script>
<span class="green_circle" ng-if="item['_source']['tpsGecodage'] < 1">
Lien
</span>
</td>
</tr>
</table>
</div>
</div>
<br>
Above this line ^^^ should be the results of a test search on the ElasticSearch server.
</body>
</html>
Basically this addTpsGeocodage(item['_source']['tpsGecodage']); (line 29) is doing nothing.
How can I pass a variable from the angular JS scope to the javascript scope.
Thanks
Assign the function to a variable so that it can be accessed globally.
<script type="text/javascript">
var addTpsGeocodage = function(p1) {
alert(p1);
}
</script>
Now, you can access addTpsGeocodage anywhere.
I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem
here is my django rendered test page
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>>
<%- title %>
</div>
</script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
</body>
</html>
the above code is what I get so far, I get the backbone bootstrapped models as foo_models,
but this variable can't be access in my app.js file, then I found this question, which use AMD approach,but my app is fairly small,all I need is get the initial data in another js file,so I don't want to add require.js and I don't want to make this foo_models variable global。
so how can I do that?
* EDITED *
Just change these lines:
<script src="app.js"></script>
//the app.js is my backbone app
<script >
var foo_models = new fooCollection({{django_rendered_json_vaiable}})
//this is how I get backbone collection initial data
</script>
to:
<script >
var raw_foo_models = {{django_rendered_json_vaiable}};
</script>
<script src="app.js"></script>
Then, add this line:
var foo_models = new fooCollection(raw_foo_models);
somewhere in your app (after fooCollection has been defined).