Backbone.js中使用Jade模板循环遍历模型数据

Question

我对使用jade/underscore模板引擎和backbone有些困惑。

我有一个带有几个数组的backbone模型，不确定如何呈现数组属性。我可以将它们移动到单独的backbone集合和视图中，但在这种情况下似乎有点过度设计。

我遵循了这篇博客文章关于如何使用backbone和jade，并在我的backbone文件中添加了以下内容。

   _.templateSettings = {
      interpolate : /\{\{(.+?)\}\}/g
   };

这使我能够以这种方式呈现模型属性：

      //in my JavaScript
      this.template = _.template($("#some-template").html());

      //in my .jade template
      input.text(type='text', name="name", value='{{name}}')

我想要解决的问题是如何在模型中对其中一个数组进行简单的循环。例如：

    - for (var child in children)
        {{child}}

但是我对正确的语法感到困惑，不知道Jade从哪里开始，Underscore接管等。谢谢。

- henry.oswald

Answer 1

你不能在浏览器中使用Jade模板语言（虽然从技术上讲可能可以，但与Underscore相比，在backbone中使用Jade不太常见）。在那里你将使用Underscore模板。在_.template文档中可以看到，你可以评估JavaScript并使用_.each方法循环遍历模型的数组属性。

在你的视图的render函数中，它最终会看起来像这样。为了提高效率，你需要将模板函数缓存为视图属性，但出于简单起见，我在此内联。例如，假设你有一个带有驱动程序名称数组的Car模型。

var template = "<% _.each(model.drivers, function(name) { %> <li><%= name %></li> <% }); %>";
return _.template(template, this);

请注意，在模板设置中需要提供evaluate语法，因为此示例包括模板标记的插值样式(<%=)和评估样式(<%)。当前您只有胡须样式插值，这是不够的。

- Peter Lyons