I am new to handlebars.js and I started to play around with it. However I am already stuck could you please explain what I am doing wrong?
This is in the head tag:
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
and this in the body:
<script>
var theData = {headerTitle:"Shop Page", weekDay:"Wednesday"};
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$(document).append (theTemplate (theData));
</script>
The page suppose to return the following:
Shop Page
Today is Wednesday
The template works, you just need to append the generated markup to an element.
$("body").append(theTemplate(theData));
Related
I am trying to show .gif banner on a posts only within specific category after first paragraph in wordpress, so I my code in loop-single.php looks like:
<?php if(in_category('my_category')){ ?>
<script>
const par = document.querySelector('p');
par.insertAdjacentHTML('afterend', '<div><img src="some_gif" alt="" class=""></div>')
</script>
<?php } ?>
But it doesn't work as expected. Anyone have an idea? Or may be some other solution that not recquires installing additional plugins (not that I don't want to, most of them just slow the site down).
Thank you
edit: 'after first paragraph' added
So, I found a way, firstly I needed to check if the post is in wanted category, than create a function and call it afterwards. The code is set in single-loop.php file in my template:
<?php if(in_category('my-category')){ ?>
<script type="text/javascript">
function krasAd() {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
};
krasAd();
</script>
<?php } ?>
There was also one way to check if you have a string in URL that only recquires JS. But it recquires you to have properly created URL structure, for example: domain.com/category/post
If I had category in my posts URL I would use code below, the code is set before closing footer tag in my single-loop.php template file:
<script type="text/javascript">
if (window.location.href.indexOf("my-string") > -1) {
const par = document.querySelector("p");
par.insertAdjacentHTML('afterend', '<div><img src="my-gif" alt="" class=""></div>')
}
</script>
I am binding the angular java script expression to bind the simple value i have written in controller function.
here is my webpage code that is created using master page,
<div class="dashboard-content-wrap auto-padding" ng-app="myModule" ng-controller="myController">
<div>
{{employee.name}}--{{employee.country}}--{{1+2}}
</div>`enter code here`
and given below is js file code,
var myApp = angular.module("myModule", [])
.controller("myController", function ($scope) {
var employee={name:"john",country:"US"};
$scope.employee = employee;
});
i am not able to bind this value in my web page please help?
I dont see any problem with your code except a missing div tag.
<body>
<div class="dashboard-content-wrap auto-padding" ng-app="myModule" ng-controller="myController">
<div>
{{1+2}}
{{employee.name}}--{{employee.country}}--{{1+2}}
</div>
</div>
</body>
Please see if this fiddle helps you.
it works perfectly when I make it like this
<body>
{{> carousel}}
</body>
<Template name="carousel">
....here the code of carousel...
</Template>
but when I use iron-router to render the Template; it does not render carousel
<body>
{{rendreRouter}}
</body>
<Template name="carousel">
....here the code of carousel...
</Template>
Router.map(function () {
this.route('carousel',{
path: '/'
});
});
I'm coming to the conclusion that the documentation you're reading is not in sync with the code base. In fact, it looks like the feature is gone.
In my own exploration of the topic, I have an alternate solution at that may work for you at the bottom of this post.
Init your carousel in template.rendered hook, for example my template is named main_slider.
Template.main_slider.rendered = function() {
// init carousel here
};
Hy guys i made this code:
--> places_list.html
<head>
<title>Testing</title>
</head>
<body>
<h1>Testing with places</h1>
{{> places_list}}
</body>
<template name="places_list">
{{#each places}}
{{ name}}
{{/each}}
</template>
enter code here
--> places_list.js
Places = new Meteor.Collection('placesNew');
if(Meteor.is_client){
Template.places_list.places = function(){
return Places.find({},{sort:{name: 1}});
}
}
It appears to be ok, but when i go to the browser to insert some data like this:
Places.insert({name: "New York"});
Nothing change... i thought that it was some thing wrong with mongo, but if i go to the browser and try that:
Places.find({},{sort{name: 1}});
I can see the data i've inputed...where is my mistake? what's wrong with this small and disturbing code?....
thanks!
In your places_list.js you should have isClient instead of is_client.
I'm trying to use handlebars. It worked pefectly until I used the each function. The function works fine but it seems like it references everything to the parameters it takes. Therefore I cannot reach the object I want. I think a bit of code will be clearer anyway.
<div id="myDiv"></div>
<script type="text/x-handlebars-template" id="handlebar">
{{#each items}}
<p>{{this.name}} {{this.surname}}</p>
<p>{{somethingInTheGeneralContext}}</p>
{{/each}}
</script>
<script>
$( document ).ready(function() {
var source = $("#handlebar").html();
var template = Handlebars.compile(source);
var context = {
items: [
{
name:"Paul",
surname:"Buchon"
},
{
name:"Pierre",
surname:"Bino"
},
{
name:"Jean",
surname:"Duflou"
}
],
somethingInTheGeneralContext: "It works !"
};
var html = template(context);
$("#myDiv").html(html);
});
</script>
This prints :
Paul Buchon
Pierre Bino
Jean Duflou
And my somethingInTheGeneralContext is lost somewhere...
Any idea how I can fix it ?
Thanks!
I believe you can use {{../param}} to break out of the each context and go back to the parent level, where somethingInTheGeneralContext exists:
<script type="text/x-handlebars-template" id="handlebar">
{{#each items}}
<p>{{this.name}} {{this.surname}}</p>
<p>{{../somethingInTheGeneralContext}}</p>
{{/each}}
</script>