Запустить шаблон в шаблоне (рекурсия) в движке шаблона 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>