Запустить шаблон в шаблоне (рекурсия) в движке шаблона underscore.js
Я использую backbone.js и underscore.js для создания приложения javascript. Поскольку часы чтения и попытки запустить шаблон в шаблоне, как показано ниже, он становится все более и более разочаровывающим.
Мой шаблон с использованием сборки в шаблоне шаблона 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 (child)).
Как я могу это сделать?
Спасибо
Ответы
Ответ 1
Я лично не пробовал это, но _.template возвращает функцию (я назвал ее templateFn, чтобы подчеркнуть это), поэтому вы можете передать ее в шаблон следующим образом:
var templateFn = _.template($('#navigation_template').html());
$(this.el).html(templateFn({model: this.model, templateFn: templateFn}));
Обратите внимание, что я передаю всю модель (предполагая, что ваша модель имеет дочернее свойство, которое само является набором базовых моделей), и ваш шаблон будет изменен на:
<script id="navigation_template" type="text/template">
<div><%= model.escape('title') %>
<% _.each(model.children, function(child) { %>
<%= templateFn(child, templateFn) %>
<% }); %>
</div>
</script>
Удачи. Я надеюсь, что это сработает для вас.
Ответ 2
Я просто пробовал это. Я тестировал его только с чистым 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>
Ответ 3
Я попытался использовать пример, представленный 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>
И это работает очень хорошо для меня. Основное отличие, как вы можете видеть, это передать объект конфигурации в templateFn вместо аргументов. Надеюсь, вы сочтете это полезным.
Ответ 4
Рекурсивный шаблон может выглядеть примерно так:
<ul>
<% entries.forEach(function (entry) { %>
<li>
<%= entry.title %>
<%
if (entry.children) {
print(tmpl({
entries: entry.children,
tmpl: tmpl
}));
}
%>
</li>
<% }); %>
</ul>
Сначала предварительно скомпилируйте свой шаблон:
entriesTmpl = _.template(entriesTmpl);
Затем вызовите его, передавая как ваши данные, так и сам шаблон:
$el.html(entriesTmpl({
entries: entryTree,
tmpl: entriesTmpl
});
Ответ 5
Я реализовал это недавно, используя базовую реляционную структуру. Я создал скрипку, которая, как мне показалось, может быть полезной, если вы хотите увидеть рабочее решение: http://jsfiddle.net/blaisco/ADKrK/
Я разместил соответствующие биты ниже.
Вид:
var FolderView = Backbone.View.extend({
el: $("#main"),
template: _.template($("#folder-tmpl").html()),
render: function () {
this.$el.html(this.template({
"folder": parentFolder.toJSON(),
"templateFn": this.template
}));
return this;
}
});
html/template:
<ul id="main"></ul>
<script type="text/template" id="folder-tmpl">
<li>
<a href="#" class="folder"><%= folder.title %></a>
<% if(folder.children.length) { %><ul><% } %>
<% _.each(folder.children, function(child) { %>
<%= templateFn({"folder": child, "templateFn": templateFn}) %>
<% }); %>
<% if(folder.children.length) { %></ul><% } %>
</li>
</script>