在underscore.js模板引擎中的模板(递归)中运行模板

Question

在underscore.js模板引擎中的模板(递归)中运行模板

Ada*_*ght 17 javascript templates backbone.js underscore.js

我正在使用backbone.js和underscore.js来构建一个javascript应用程序.从阅读和尝试在下面的模板中运行模板的几个小时,它变得越来越令人沮丧.

我的模板使用undercore.js模板引擎中的构建:

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

Run Code Online (Sandbox Code Playgroud)

我想为每个子元素渲染此模板(render_this_template_recursively(child)).

我怎样才能做到这一点？

谢谢

Answer 1

tim*_*ham 36

我个人没试过这个但是_.template会返回一个函数(我将它命名为templateFn以强调它),所以你可以将它传递给模板,如下所示:

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

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

Run Code Online (Sandbox Code Playgroud)

请注意,我正在传递整个模型(假设您的模型有一个子属性,它本身就是骨干模型的集合),您的模板将更改为:

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

Run Code Online (Sandbox Code Playgroud)

祝好运.我希望这适合你

Answer 2

Ash*_*tta 8

我刚刚成功尝试了这个.我只使用纯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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Ole*_*nko 5

我试过用timDunham和Ates Goral提供的例子,但它对我不起作用,所以我做了一点升级.在下面找到它.

视图:

    template: _.template($("#tree").html()),

    render: function () {
        this.$el.html(this.template({
            options: this.collection.toJSON(),
            templateFn: this.template
        }));
    }

Run Code Online (Sandbox Code Playgroud)

和模板:

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

Run Code Online (Sandbox Code Playgroud)

它对我来说非常好.正如您所看到的,主要区别在于将配置对象传递给templateFn,而不是参数.希望你会发现它很有用.

归档时间：	14 年，3 月前
查看次数：	8862 次
最近记录：	10 年，5 月前