Запустите шаблон в шаблоне (рекурсия) в шаблонизаторе underscore.js - PullRequest
Новая
       18

Запустите шаблон в шаблоне (рекурсия) в шаблонизаторе underscore.js

17 голосов
/ 09 ноября 2011

Я использую 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)).

Как я могу это сделать?

Спасибо

Ответы [ 5 ]

36 голосов
/ 09 ноября 2011

Я лично не пробовал это, но _.template возвращает функцию (я назвал ее templateFn, чтобы подчеркнуть это), чтобы вы могли передать ее в шаблон следующим образом: 

var templateFn = _.template($('#navigation_template').html());

$(this.el).html(templateFn({model: this.model, templateFn: templateFn}));

Обратите вниманиечто я передаю всю модель (при условии, что ваша модель имеет свойство children, которое само по себе является коллекцией базовых моделей), и ваш шаблон будет изменен на: 

<script id="navigation_template" type="text/template">
  <div><%= model.escape('title') %>
      <% _.each(model.children, function(child) { %>
          <%= templateFn(child, templateFn) %>
      <% }); %>
  </div>
</script>

Удачи.Я надеюсь, что это работает для вас

8 голосов
/ 02 августа 2012

Я только что успешно попробовал это.Я протестировал его только с чистым 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>
5 голосов
/ 14 января 2013

Я пытался использовать пример, представленный timDunham и Ates Goral, но у меня это не сработало, поэтому я немного улучшил его.Найдите его ниже.

view: 

    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 вместо аргументов.Надеюсь, вы найдете это полезным.

1 голос
/ 02 декабря 2012

Рекурсивный шаблон может выглядеть примерно так: 

<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
});
0 голосов
/ 16 апреля 2013

Я реализовал это недавно, используя магистральные реляционные. Я создал скрипку, которая, на мой взгляд, может быть полезна, если вы хотите увидеть рабочее решение: 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 / шаблон: 

<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>
...