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

Stack Overflow用户

提问于 2011-11-09 15:30:08

回答 5查看 9.1K关注 0票数 16

我正在使用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(子元素) )呈现这个模板。

我该怎么做呢？

谢谢

javascript

templates

backbone.js

underscore.js

语音识别特惠活动

语音识别准确率高、用于会议内容转写、客服质检等场景，助力企业将本增效

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-11-09 18: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>

祝好运。我希望这对你有用

票数 35

Stack Overflow用户

发布于 2012-08-01 20: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>

票数 8

Stack Overflow用户

发布于 2013-01-14 11: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>