I am using mustache.js to render template for 2 user data. Due to some error I am unable to get result, though for a single object I got results. Can someone help?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
loadUser();
});
});
</script>
</head>
<body>
<button>Click Me!</button>
<div id="target"></div>
<script>
function loadUser() {
var template = $('#template').html();
var jdata = [{name: "Luke", age:"43"},{name:"Lara",age:"19"}];
var rendered = Mustache.render(template, jdata);
$('#target').html(rendered);
}
</script>
<script id="template" type="x-tmpl-mustache">
<p>Hello {{ name }}! with age {{age}}</p>
</script>
</body>
</html>
You are getting this error because repeating expressions are missing in the mustache template. Use the code below instead for defining template.
<script id="template" type="x-tmpl-mustache">
{{#.}}<p>Hello {{name}}! with age {{age}}</p>{{/.}}
</script>
Related
I've started to work with Knockout.js and wanted to write some simple component, but the code I've written didn't display template's elements. I'm only seeing the text inside "h1" tag.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Component</title>
<script type="text/javascript" src="knockout-3.4.2.js"></script>
</head>
<body>
<h1>Counter starting at 1:</h1>
<counter params="initialCount: 1"></counter>
<script type="text/javascript">
function viewModel(params) {
const self = this;
self.count = ko.observable(params.initialCount);
self.increment = () => self.count(self.count() + 1);
}
const template =
`<div>
<span data-bind="text: count"></span>
<button type="button" data-bind="click: increment">
Increment
</button>
</div>`;
ko.components.register('counter', { viewModel, template });
</script>
</body>
</html>
What I'm doing wrong?
Try adding ko.applyBindings(); at the end of your script.
I have a simple code where templating is to be done by Mustache.js, but failing to show anything on screen. There are no errors also in console. Kindly Help!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js" ></script>
<script>
$(document).ready(function(){
var person = {
firstName: "Christophe",
lastName: "Coenraets",
blogURL: "http://coenraets.org"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
var html = Mustache.to_html(template, person);
$('#div1').html(html);
});
</script>
</head>
<body>
<div id="#div1"></div>
</body>
</html>
Anyone, can tell where is the problem?
Replace '#div1' to 'div1' of id attribute in div tag
http://plnkr.co/edit/m14fkua89UOAjlX506U5?p=preview
Just replace #div1 to div
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js" ></script>
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function(){
var person = {
firstName: "Christophe",
lastName: "Coenraets",
blogURL: "http://coenraets.org"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
alert(template);
var html = Mustache.to_html(template, person);
alert(html);
$('#div1').html(html);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
I would like to know how to access to a javascript variable inside another html.twig file in symfony2. Let's assume that we have two html\twig files: file1.html.twig and file2.html.twig, their codes are as below:
The code of file1.html.twig:
<html>
<head>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
//here is some code
});
});
</script>
</head>
<body>
</body>
</html>
The code of file2.html.twig:
<html>
<head>
<script>
function f1(){
//here is the code that I need to access to the variable calendar of the file file1.html.twig
}
</script>
</head>
<body>
<form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:idg})}}' method="POST" {{ form_enctype(form) }} onsubmit="f1();">
//here the body of the form
</form>
</body>
</html>
Actually, what I would like to know is how to access to the variable "calendar" of file1.html.twig inside the file file2.html.twig. So my question is it possible to do that??..If yes, how?
Put the code you want to share in a .js file:
// src/Acme/FooBundle/Resources/public/js/sharedCode.js
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
//here is some code
});
});
Then just include the script everywhere you want:
<html>
<head>
...
</head>
<body>
...
{% javascripts '#AcmeFooBundle/Resources/public/js/sharedCode.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>
I have an index.html where I have this code: I followed it from the documentation on handlebars site, but I am not able to make it work. When I pass a string to var source then it works fine, but when I try to get the template using $(#elem_id), handlebars does not insert the data in it.
<html>
<head>
<script src="../static/js/handlebars-1.0.0.beta.6.js"></script>
<script src="../static/jquery/1.7.1/jquery.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">
$(document).ready(function() {
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var d = {"title": "My New Post", "body": "This is my first post!"};
var result = template(d);
console.log(result); //This just returns the template html, without the data
});
</script>
</body>
</html>
I assume this is caused by your HTML being in script tags. Try wrapping your Html inside an invisible div (or make the div itself invisible), i.e.:
<div style='display:none;' id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</div>
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>