I have simple a navbar in bootstrap. When I reduce the size of chrome browser navbar menus turns into Hamburger icon, when I am clicking on it, menus are not visible.
app.component.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
package.json file
{
"name": "uiassignment",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~10.0.6",
"#angular/common": "~10.0.6",
"#angular/compiler": "~10.0.6",
"#angular/core": "~10.0.6",
"#angular/forms": "~10.0.6",
"#angular/platform-browser": "~10.0.6",
"#angular/platform-browser-dynamic": "~10.0.6",
"#angular/router": "~10.0.6",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1000.5",
"#angular/cli": "~10.0.5",
"#angular/compiler-cli": "~10.0.6",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
tsconfig.json file
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Project information
Angular CLI: 10.0.7
Node: 12.18.1
Angular: 10.0.11
This menus is not expanding
How can I fix this issue?
There are several issues in your project. I will go step by step and explain, what is wrong.
You added bootstrap in your package.json and installed it using npm i or yarn (depending on what you are using). Afterwards, it is loaded inside node_modules/bootstrap. Additionally, requirements such as jquery and popper are installed in the folder node_modules. That's fine. Then, you use angular.json to import it. However, there are two issues:
(a) You added it in the "test" section, but you have to define it in the "build" section
(b) Several links are incorrect and do not exist (have a look at the node_modules/boostrap/... folder for instance).
Here is your "new" angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"UIAssignment": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/UIAssignment",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "UIAssignment:build"
},
"configurations": {
"production": {
"browserTarget": "UIAssignment:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "UIAssignment:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "UIAssignment:serve"
},
"configurations": {
"production": {
"devServerTarget": "UIAssignment:serve:production"
}
}
}
}
}
},
"defaultProject": "UIAssignment",
"cli": {
"analytics": "01c58ec0-920b-4102-a361-7d46f52578c7"
}
}
You add a <!doctype html><html lang="en"> ... inside app.component.html. However, app.component.html is loaded inside your index.html (using <app-root></app-root>), so do not add those things in there. Instead, your app.component.html should just contain the <nav>...</nav> and all other contents, but no headings / imports.
Since you defined Bootstrap, etc. in your package.json and loaded it into your project in the angular.json, you do not need to load it again using <script> or <link>.
Here is your "new" app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">eNno</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
and your "new" index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Please note that you should restart your angular cli project after making edits to angular.json
Please also note that adding bootstrap.js and jQuery is not the proper way to use it inside an Angular project. Instead have a look on ngx-bootstrap
If your project does not run for any reason, you can also remove the added styles and scripts from angular.json and use the following lines inside index.html <head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Good luck!
using CDN links of bootstrap and call the css links two times and using different bootstrap js link of different version.
As you are using package of bootstarp .
Import it in angular.json as below :
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Restart ng serve if you're running it, and Bootstrap should be working on your app.
I am trying to combine 2 html file together. Both working fine when using separately. But when i am trying to combine them they are losing formatting.
w3 containers are not showing correctly. It only shows the graph and above graph is non formatted text.
I try to place the scripts at different places but not much with success.
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear"},
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if(i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
It seems you forgot to use w3's CSS into your HTML, ie you should put this line in <head> tag
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
so your code became below:
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear" },
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for (var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if (i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
When I have cellTemplate as the following,
{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }
what I get is <a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a> in the column. But what I want is simply an anchor link with Edit text.
The getAnchorLink function is as follows
$scope.getAnchorLink = function (rowObj) {
var tempId = rowObj.entity.Id.toString();
return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>'
};
Can someone please correct me where I am wrong?
If you want to show anchor tag in ui-grid below is an example code,
app.js
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.gridOptions = {
columnDefs: [{
'field': 'code'
}, {
'field': 'name'
}, {
'field': 'status'
},{
'field':'link',
'cellTemplate':'celltemplate.html'
}]
};
$scope.gridOptions.data = [{
"code": "Cox",
"name": "Carney",
"status": 0
}, {
"code": "Lorraine",
"name": "Wise",
"status": 1
}, {
"code": "Nancy",
"name": "Waters",
"status": 2
}];
}
]);
celltempalte.html
<div>
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}">
Click me
</a>
</div>
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>
<script src="app.js"></script>
</body>
</html>
main.css
.grid {
width: 500px;
height: 400px;
}
The following are my HTML, AngularJS, JSON codes
index.html
<! DOCTYPE HTML>
<html>
<head>
<link type='text/css' rel='stylesheet' href='styles/photostyle.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/app.js"></script>
<title>My Photography</title>
</head>
<body ng-app="photoPage">
<div class="container">
<div id="header">
<p id="title">My Photography</p>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="photoNo" ng-repeat="photo in photos">
<photo-infos info="photo"></photo-infos>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module("photoPage", []);
app.controller("MainController", ['$scope', 'photos', function($scope, photos) {
photos.success(function(data) {
$scope.photos=data;
});
}])
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'photoInfos.html'
};
})
.factory("photos", ["$http", function($http) {
return $http.get('addonFiles/photoInfo.json')
.success( function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
photoInfo.json
[
{
"name": "shot 01",
"date": 20150321075416,
"photoUrl": "photos/01.jpg"
},
{
"name": "shot 02",
"date": 20150527111604,
"photoUrl": "photos/02.jpg"
},
{
"name": "shot 03",
"date": 20150626113654,
"photoUrl": "photos/03.jpg"
}
]
photoInfos.html
<div class="photo-container">
<img class="photo-responsive" ng-src="{{ info.photoUrl }}"/>
<h3>{{ info.name }}</h3>
<p class="photoDate">{{ info.date }}</p>
The files are kept in the correct places as they should be. But my output comes out with just the div in id="header" and not the photos whose information is in JSON file.
why is the data in JSON not showing in the output??
Here is a plunker with a solution:
http://plnkr.co/edit/pJBMtDkSx8gcGqPY4AyS?p=preview
Basically, I added the following template
<li>{{info.name}}</li>
And changed the directive:
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '=info'
},
templateUrl: 'photoInfos.html'
};
})
I have JSON data with this format
{
"count": 3,
"value": {
"title": "Daily Feeds Mashup",
"description": "Feeds Description",
"items": [
{
"title": "Title One",
"link": "http://linkone.com",
"description": "Title one description"
},
{
"title": "Title Two",
"link": "http://titletwo.com",
"description": "Title two description"
},
{
"title": "Title Three",
"link": "http://linkone.com",
"description": "Title three description"
}
]
}
}
The "items" part is an array. How can I construct a template in Handlebars to give me a an html result in a jQM listview. Here's the full html source of what I currently have, including the JavaScript
<script src="libs/jquery-2.0.3.min.js"></script>
<script src="libs/jquery.mobile-1.4.0.min.js"></script>
<script src="libs/handlebars-v1.3.0.js"></script>
<link rel="stylesheet" href="../styles.css">
<script type="text/javascript">
$("document").ready(function() {
var template = $("#itemTemplate").html();
var renderer = Handlebars.compile(template);
var result = renderer({
"count" : 3,
"value" : {
"title" : "Daily Feeds Mashup",
"description" : "Feeds Description",
"items" : [{
"title" : "Title One",
"link" : "http://linkone.com",
"description" : "Title one description"
}, {
"title" : "Title Two",
"link" : "http://titletwo.com",
"description" : "Title two description"
}, {
"title" : "Title Three",
"link" : "http://linkone.com",
"description" : "Title three description"
}]
}
});
$("#container").html(result);
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h3>Header<h3>
</div>
<div data-role="content">
<script type="text/x-handlebars-template" id="itemTemplate">
<ul data-role="listview" id="posts">
{{#each items}}
<li>
<a data-transition="" href="{{{link}}}">
<p>{{{title}}}</p>
<small>{{{description}}}</small>
</a>
</li>
{{/each}}
</ul>
</script>
<h1>This is my header one</h1>
<h3>This is my header three</h3>
<!-- This is the container where the templates will be instantiated -->
<div id="container"></div>
</div>
</div><!-- page -->
</body>
Working example: https://github.com/theAcadian/phonegap-workshop-jqm/blob/master/index.html
Update:
Working jsFiddle: http://jsfiddle.net/Gajotres/vds2U/43/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<script id="items-template" type="text/x-handlebars-template">
{{#.}}
<li><h3>{{this.title}}</h3><p>{{this.description}}</p></li>
{{/.}}
</script>
<ul id ="items_list" data-role="listview" data-filter="true">
</ul>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
var items = {
"count": 3,
"value": {
"title": "Daily Feeds Mashup",
"description": "Feeds Description",
"items": [
{
"title": "Title One",
"link": "http://linkone.com",
"description": "Title one description"
},
{
"title": "Title Two",
"link": "http://titletwo.com",
"description": "Title two description"
},
{
"title": "Title Three",
"link": "http://linkone.com",
"description": "Title three description"
}
]
}
};
var itemsHandler = Handlebars.compile($("#items-template").html());
$('#items_list').html(itemsHandler(items.value.items));
$('#items_list').listview().listview('refresh');
});