javascript - 下划线中的部分模板(就像在 Handlebars 中一样)？

Question

我有一个像这样的 Backbone 模型

var PeopleModel = Backbone.Model.extend({
defaults: {              
    "people": [
          { "username": "alan", "firstName": "Alan", "lastName": "Johnson", "phone": "1111", "email": "alan@test.com" },
          { "username": "allison", firstName: "Allison", "lastName": "House", "phone": "2222", "email": "allison@test.com" },
          { "username": "ryan", "firstName": "Ryan", "lastName": "Carson", "phone": "3333", "email": "ryan@test.com" },
          { "username": "ed", "firstName": "Edward", "lastName": "Feild", "phone": "4444", "email": "ed@test.com" },
          { "username": "phil", "firstName": "Philip", "lastName": "Doom", "phone": "5555", "email": "phil@test.com" },
          { "username": "gerald", "firstName": "Gerald", "lastName": "Butler", "phone": "6666", "email": "gerald@test.com" }
    ],
    "company": {"name": "Random Corp."},
    "country": "England"
}

});

下面是我的模板

<script id="people-template" type="text/x-handlebars-template">
{{#each people}}
  {{> person}}
{{/each}}
</script>

<script id="person-partial" type="text/x-handlebars-template">
 <div class="person">
    <h2>{{fullName}} </h2>
    <div class="phone">{{phone}}</div>
   <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>    
 </div>

这就是我使用 handlebars.js 实现 partial 的方式。

我的问题

1.我们有类似的东西吗，我的意思是 underscore.js 模板引擎的 partials incase？

2.如果可以，我们如何在underscore.js模板引擎中实现partial

Answer 1

不，Underscore 的模板中没有原生的部分支持。但是，您几乎可以在 <% ... %> 中放入任何您想要的 JavaScript。 ;特别是，你可以调用你自己的函数，这样你就可以毫不费力地添加一些局部的东西。你可以有这样的模板:

<script id="people-template" type="text/x-handlebars-template">
    <% _(people).each(function(person) { %>
      <%= partial('person', person) %>
    <% }) %>
</script>

然后添加一个partial功能window :

window.partial = function(which, data) {
    var tmpl = $('#' + which + '-partial').html();
    return _.template(tmpl)(data);
};

演示:http://jsfiddle.net/ambiguous/HDuj5/9/

它不如{{> ... }} 漂亮漂亮在 Handlebars 中，但 Underscore 的模板是 JavaScript 本身的一个非常薄的包装器，这在一定程度上限制了你。您可以使用 namespace 来避免将内容直接放在 window 中或者你可以使用 {variable: ...} option to _.template 和一个包装器来设置你的标准助手。