在underscore.js模板引擎的模板(递归)中运行模板
在underscore.js模板引擎的模板(递归)中运行模板
提问于 2011-11-09 23:30:08
我正在使用backbone.js和underscore.js来构建一个javascript应用程序。由于像下面这样花了几个小时阅读并尝试在模板中运行模板，这变得越来越令人沮丧。
我的模板使用build in underscore.js模板引擎：
<script id="navigation_template" type="text/template">
<div><%= title %>
<% _.each(children, function(child) { %>
<% render_this_template_recursively(child) %>
<% }); %>
</div>
</script>我想为每个子元素(render_this_template_recursively(子元素) )呈现这个模板。
我该怎么做呢？
谢谢
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-11-10 02:25:33
我没有亲自尝试过，但是_.template会返回一个函数(我将其命名为templateFn以强调这一点)，所以您可以像这样将它传递到模板中：
var templateFn = _.template($('#navigation_template').html());
$(this.el).html(templateFn({model: this.model, templateFn: templateFn}));请注意，我传入的是整个模型(假设您的模型有一个would属性，该属性本身是backbone模型的集合)，并且您的模板将被更改为：
<script id="navigation_template" type="text/template">
<div><%= model.escape('title') %>
<% _.each(model.children, function(child) { %>
<%= templateFn(child, templateFn) %>
<% }); %>
</div>
</script>祝好运。我希望这对你有用
Stack Overflow用户
发布于 2012-08-02 04:46:13
我刚刚成功地尝试了一下。我只用纯UnderscoreJS测试了它，没有用BackboneJS，但从功能上来说这并不重要。
代码如下：
<!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>Stack Overflow用户
发布于 2013-01-14 19:12:13
我试过使用timDunham和Ates Goral提供的例子，但它对我不起作用，所以我对它做了一点升级。在下面找到它。
查看：
template: _.template($("#tree").html()),
render: function () {
this.$el.html(this.template({
options: this.collection.toJSON(),
templateFn: this.template
}));
}和模板：
<script type="text/template" id="tree">
<ul>
<% _.each(options, function (node) { %>
<li><%= node.title %></li>
<% if (node.children) { %>
<%= templateFn({ options: node.children, templateFn: templateFn }) %>
<% } %>
<% }); %>
</ul>
它对我来说非常好用。正如您所看到的，主要区别在于将configuration对象传递给templateFn，而不是传递参数。希望你会发现它是有用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8067291
复制相关文章
相似问题