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>
Related
I have the below AngularJS code.
The current time is not displayed after executing the below code:
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="angular.js"></script>
</head>
<body>
<h1>Clock Application</h1>
<div ng-controller="t"></div>
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>
Keep the controller to parent tag. Then it will work.
Corrected code below:
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="t">
<h1>Clock Application</h1>
<div></div>
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>
The timeString value is not binding because the ng-bind is not aware of the $scope.timeString, since it is not inside the controller.
Try this
<div ng-controller="t">
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<h1>Clock Application</h1>
<div ng-controller="t">
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}
I'm confused that it failed to use JSON on Angular + Laravel(5.2.11)
My plan is,
1. Convey JSON to a blade file
2. Get JSON inside script tag, and set it to a variable
3. Display each data
I added interpolateProvider to avoid duplicating Laravel and Angular description. But actual displayed data is
I checked the following was display I expected.
var json = {!! $contents !!};
Controller.php
public function show()
{
$champions = DB::table('Champion')
->select('ChampionName', 'ChampionKey')
->orderBy('ChampionKey')
->get();
return view('allChampionsPage')->with('contents', json_encode($champions));
}
allChampionsPage.blade.php
#extends('layouts.defaultAngular')
#section('menuItem1', 'When buy')
#section('menuItem2', 'When killed')
#section('menuItem3', 'Where lane')
#section('menuItem4', 'How many CS')
#section('menuItem5', 'Search')
defaultAngular.blade.php
<!DOCTYPE html>
<html lang="ja" ng-app="itemBuildStatisticsApp">
<head>
<link rel="stylesheet" href="{{{asset('/css/bootstrap.css')}}}" type="text/css">
<link rel="stylesheet" href="{{{asset('/css/default.css')}}}" type="text/css">
</head>
<body ng-controller="ChampionsController as ChampionsCtrl">
<?php include_once("analytics/analyticstracking.php") ?>
<div id="container">
<div id="header" class="middleContentItem"></div>
<div id="middle">
<div id="menu" class="middleContentItem"></div>
<div id="contents" class="middleContentItem">
<ul ng-repeat="champion in ChampionsCtrl.champions">
<% champion.ChampionKey + ', ' + champion.ChampionName %>
</ul>
</div>
</div>
<div id="right"></div>
<div id="footer" class="middleContentItem"></div>
</div>
<script type="text/javascript">
var json = {!! $contents !!};
var app = angular.module('itemBuildStatisticsApp', [], funtion($interpolateProvider){
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('ChampionsController', function(){
this.champions = json.query();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
Modified code
<script type="text/javascript">
var json = {!! $contents !!};
var app = angular.module('itemBuildStatisticsApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('ChampionsController', function(){
this.champions = angular.fromJson(json);
});
This is my code. At this moment only one product display. I would like to display all of the products by the click of a button or on page load.
<html>
<head>
<title>
Products
</title>
<script src="/appmachine/core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/bridge/core.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript"> window.App</script>
</head>
<body>
<p id="name"></p>
<p id="imageid"></p>
<p id="shop"></p>
<p id="description"></p>
<a onClick="window.App.navigateToBlock('products', function(alert('Succes')))">Test</a>
</body>
<script>
App.getCurrentRecord(function(products){
document.getElementById('name' ).innerHTML = products.name;
document.getElementById('imageid').innerHTML = '<img width="300" src="'+ products.imageid +'"/>';
document.getElementById('shop').innerHTML = products.shop;
document.getElementById('description').innerText = products.description;
});
</script>
</html>
Manual DOM manipulation is painful, try using templates.
This example uses mustache.js, but you can use whatever you prefer.
JSBin Demo
<div id="target"></div>
<script id="template" type="x-tmpl-mustache">
{{#products}}
<p id="name">{{ name }}</p>
<img id="imageid" src="{{imageid}} />
<p id="shop">{{ shop }}</p>
<p id="description">{{ description }}</p>
{{/products}}
</script>
The syntax {{#products}} {{/products}} specifies a list based off of JSON data.
var products = {
"products": [{
name: "Alice",
imageid: '<img width="300" src="#"/>',
shop: 'Test Shop',
description: 'test description'
}, {
name: "Bob",
imageid: '<img width="300" src="#"/>',
shop: 'Another Shop',
description: 'super description'
}]
};
Using this data you can populate the template in JavaScript.
function loadView(products) {
var template = $('#template').html();
Mustache.parse(template);
var rendered = Mustache.render(template, products);
$('#target').html(rendered);
}
loadView(products);
<!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}}