Menu
I am using backbone.js and underscore.js to build an javascript application. Since hours of reading and trying to run a template within a template like below, it is getting more and more frustrating.
My template using the build in underscore.js template engine:
<script id="navigation_template" type="text/template">
<div><%= title %>
<% _.each(children, function(child) { %>
<% render_this_template_recursively(child) %>
<% }); %>
</div>
</script>
I would like to render this template for every child element ( render_this_template_recursively(child) ).
How can I do this?
Thanks
849
I've not personally tried this but _.template returns a function (I've named it templateFn to emphasize that), so you could pass it into the template like this:
var templateFn = _.template($('#navigation_template').html());
$(this.el).html(templateFn({model: this.model, templateFn: templateFn}));
Notice that i'm passing in the whole model (assuming that your model has a children property which is itself a collection of backbone models) and your template would be changed to:
<script id="navigation_template" type="text/template">
<div><%= model.escape('title') %>
<% _.each(model.children, function(child) { %>
<%= templateFn(child, templateFn) %>
<% }); %>
</div>
</script>
Good luck. I hope this works for you
82
I just successfully tried this. I tested it with only pure UnderscoreJS, no BackboneJS but functionally it shouldn't matter.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<style>
.container {
position: relative;
margin-bottom: 20px;
}
#container {
position: relative;
margin: auto;
}
.fib-box {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,68,242,0.15);
border: 1px solid rgba(0,0,0,0.20);
}
.header {
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="header">
<h3>Render Fibonacci With UnderscoreJS</h3>
<form id="updateCount">
<input type="text" value="13" id="fibSequence" />
<input type="submit" value="Update" />
</form>
</div>
<div class="container">
<div id="container">
</div>
</div>
<script type="text/template" id="template">
<% if(depth){ %>
<div class='fib-box' data-depth='<%= depth %>' style='width: <%= val %>px; height: <%= val %>px;'></div>
<% print(template(getFibObj(depth-1))) %>
<% } %>
</script>
<script type="text/javascript">
var template;
$(document).ready(function(){
template = _.template($("#template").text());
$("#updateCount").submit( function(){
$("#container").html( template( getFibObj($("#fibSequence").val()) ) );
var width = $("#container .fib-box:first").css("width");
$("#container").css( {width: width, 'min-height': width} );
return false;
});
$("#updateCount").submit();
});
function getFibObj(i){
return {depth: i, val: fib(i)};
}
function fib(i){
return ( i == 0 || i == 1 ) ? i : fib(i-1) + fib(i-2);
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
