I have been looking for a simple basic example of using a Mustache template where the Mustache markup and templating stays in the HTML document (separation of concerns).
Here is where I am at:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h2>Here is a person</h2>
<template id="theTemplate">
{{name}}
</template>
</div>
<script>
$(function() {
template = $('#theTemplate').html();
data = {
name: 'billy'
};
Mustache.render(template, data);
});
</script>
</body>
</html>
No errors are being thrown but it is not working!
Mustache.render returns a string which is the amalgamation of the template and the data from the provided object. It does not do anything else with that string, so if you want to update the DOM you will still need to do that manually. As you're using jQuery you can use append() to do that:
$('h2').append(Mustache.render(template, data));
However, it would make more sense to include the whole h2 text value in the template to at least make its use worthwhile:
$(function() {
template = $('#theTemplate').html();
data = { name: 'billy' };
$('h2').text(Mustache.render(template, data));
});
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<div class="container">
<h2></h2>
<template id="theTemplate">
Here is a person named {{name}}
</template>
</div>
Related
I have a very simple index.html file that I am using to learn Vue. I have attached a click event on a button and it is supposed to alert the user.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello Visitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="app">
{{ message }}
</div>
<input type="text"> </br> </br>
<button v-on:click="greet" class="btn btn-primary">Greet Me!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
message: 'What is your name?'
},
methods: {
greet: function(){
alert("Hello to you too.");
},
}
});
I thought that the function needed the event param in the function but that did not help. Is there something that I am missing?
Your Vue app is bound to #app.
Stuff that happens outside that div, Vue doesn't parse or know about.
Move your button inside the #app div and it should function. You may also want to give your <button> a type="button" - that'll prevent it from trying to submit a form, which is the default behavior. (You can also do <button #click.prevent="greet"> to accomplish the same thing. The .prevent prevents the default behavior.)
I'm trying to find out how to parse the url and put the names in an array and then to parse the json to get the lodash score and convert the score to a whole number. any help would be nice.
<head>
<title> final</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<h3>The window.location object</h3>
<input type="button" value="Load new document" onclick="newDoc()">
<script>
function newDoc() {
window.location.assign("https://api.npms.io/v2/package/lodash");
}
</script>
<!--// JSON.parse(");-->
<!--// displayfromJSON(lodash);-->
<!--// window.substring(0.9200443085079093);-->
<!--// split(92)-->
</body>
</html>
When you change the location to that url your page no longer exists...and neither does any of your script
Use fetch() to get the data and then do what you want with it.
fetch('https://api.npms.io/v2/package/lodash')
.then(res => res.json())
.then(data => console.log(data.score))
I have this template as my sinatra layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
...
</nav>
<div class="container">
<%= yield %>
</div>
<%#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>%>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="/static/js/bootstrap.min.js"/>
<script src="/static/js/jobs/new.js" />
</body>
</html>
and this small javascript call
console.log("running")
$('#datepicker').datepicker()
the server gets a 200 call to the js file but nothing will print to the console or execute.
Always use <script></script>.
<script src="..." /> is not a valid tag. When the HTML is parsed, it thinks that <script src="/static/js/jobs/new.js" /> is in the body of the <script src="/static/js/bootstrap.min.js"/> tag like this:
...
<script src="/static/js/bootstrap.min.js">
<script src="/static/js/jobs/new.js">
...
From MDN <script> documentation:
Tag omission
None, both the starting and ending tag are mandatory.
"Make sure window.Snap is defined or supply your own with SnapConstructorProvider.use(MySnap)."
That's what I have when I'm trying to use angular-snap. I followed what they said in github but still didn't work. Can I have some help ? I watched the angular-snap code and I saw a test :
if(angular.isUndefined(S)) {
throw new Error('Snap constructor is not defined. Make sure ' +
'window.Snap is defined or supply your own with ' +
'SnapConstructorProvider.use(MySnap).');
}
When I put a console.log of angular.isUndefined, it returns true but I don't know why.
Here the html :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<title>AO</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/angular-snap.min.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<snap-drawer>
<p>I'm a drawer ! I maybe I've got some sweet navigation links.</p>
</snap-drawer>
<snap-content>
<p>Hello! I'm your main content!</p>
</snap-content>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/angular-snap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Javascript code :
var app = angular.module('myApp', ['snap']);
Thanks for help.
You have to include snap.js library to your index.html page
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.3/snap.min.js"></script>
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');