Backbone.js Jade并在模型上循环

hen*_*ald 7 javascript node.js backbone.js underscore.js pug

我对使用带有玉/下划线的主干进行模板操作感到有些困惑.

我有一个骨干模型,里面有几个数组,我不知道如何渲染数组属性.我可以将它们移动到一个单独的骨干集合和视图中,但在这种情况下看起来有些过分.

我关注使用骨干与玉的博客文章,并将以下内容添加到我的骨干文件中

   _.templateSettings = {
      interpolate : /\{\{(.+?)\}\}/g
   };
Run Code Online (Sandbox Code Playgroud)

这允许我在这个庄园中渲染模型属性:

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

      //in my .jade template
      input.text(type='text', name="name", value='{{name}}')
Run Code Online (Sandbox Code Playgroud)

我想解决的是如何在模型中的一个数组上进行简单的循环.例如

    - for (var child in children)
        {{child}}
Run Code Online (Sandbox Code Playgroud)

但我对正确的语法非常困惑,其中jade开始和下划线接管等等.谢谢.

Pet*_*ons 5

你不能在浏览器中使用jade(嗯,你可能在技术上可以,但使用骨干而不是下划线并不常见).你将在那里使用下划线模板. _.template上的文档显示您可以评估javascript并使用_.each方法循环模型的数组属性.

它最终会在你的视图render功能中看起来像这样.您需要将模板函数缓存为视图的属性以提高效率,但为简单起见,我将其内联到此处.例如,假设您的Car模型具有drivers作为驱动程序名称数组的列表.

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

请注意,您需要evaluate在模板设置中提供语法,因为此示例包括模板标记的interpolate style(<%=)和evaluate style(<%).目前你只有胡子样式插值,这是不够的.