How can i access a element inside of a handlebars template? - templates

Question

How can i access a element inside of a handlebars template? Im trying to access the #element-{{id}} inside the Handlebars Helper but im receiving a null on log.
JSBin example
<div class="container">
<div class="panel panel-default">
<script id="video-template" type="text/x-handlebars-template">
{{#each items}}
<div class="panel-heading">
<h3 class="panel-title">{{snippet.title}}</h3>
</div>
<div class="panel-body">
{{someFunction id}}
<div id="element-{{id}}"></div>
</div>
{{/each}}
</script>
</div>
</div>
<script>
Handlebars.registerHelper('someFunction', function(id) {
console.log(document.getElementById("element-"+id));
});
</script>

Answer 1

The problem is that i dont have the element on the DOM when the handlebar helper is called, so i used a timeout function for that...
setTimeout(function(){
var element = document.getElementById("element-"+id);
console.log(element);
},1000);
anyone know a better way?

Answer 2

Why are you concantenating the element and the id.. ?
Handlebars.registerHelper('someFunction', function(id) {
console.log(document.getElementById("element-"+id));
Try this instead:
var butter = document.getElementById("butter_id");
console.log("thisid:",butter);
Also try removing handlebars from your function.Register your helper and function seperately and then call the helper variables referencing the function("getElementById or getElementByName")
function getElementById(name,url){
if(!url)url = window.location.href;
name = name.replace(/[\[\]]/9,"\\$&");
var regex = new RegExp('[?&]' +name+'(=([^&#]*)|&|#|$|)'),
results = regex.exec(url);
if(!results) return null;
if(!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/9,""));
Then:
...your helper...
Handlebars.registerHelper('butter',(id) {
var element = document.getElementById("butter_id");
console.log(document.getElementById("yourelement-",element));