1

我通常将下划线的模板存储在这样的数组中：

var tmpl = [
  _.template('...'),
  _.template('...'),
  _.template('...'),
]

现在我遇到了一种情况，我在模板中使用每个循环，但想将它移动到这个数组中。静态 HTML 模板很简单：

var items = [
  [name: 'First'],
  [name: 'Second'],
  [name: 'Third']
];

var html = '<tr>';

_(items).each(function(item) {
  html += '<td>'+item.name+'</td>';
});

html += '</tr>';

它工作得很好但很丑，所以我想把它移到模板的tmpl列表中。所以我有这个：

var tmpl = [
  _.template('<tr><td>#{name}</td></tr>');
]

所以我的问题- 我如何在模板中构建一个 for 循环并将整个对象传递给它？

我已经重写了我的自定义模板，但它实际上看起来要糟糕得多，而且不起作用，而且语法一团糟。这就是我所说的：

var tmpl = {
    vertical: _.template(
      '<table data-src="#{id}">'+
        '#{_(items).each(function(item) { }'+
        '<tr>'+
          '<td style="width: #{item.width}px; height: #{item.height}px">'+
            '#{item.text}'+
          '</td>'+
        '</tr>'+
        '#{ });}'+
      '</table>'
    )
  }

而不是简单明了：

var table = '<table data-src="'+id+'">';
      $(tds).each(function() {
        table += '<tr>';
          table += '<td style="width: '+$(this).width()+'px;height: '+$(this).height()+'px;">';
            table += $(this).html();
          table += '</td>';
        table += '</tr>';
      });
      table += '</table>';

请注意，我的模板语法不同。不是<%= var %>但是#{var}：

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

我想保留它。

4

1 回答 1

0

这是我使用下划线的功能所做的事情：

var row = _.template('<td><td style="width: #{width}px; height: #{height}px">'+
                     '#{text}</td></tr>');

function rows ( items ) {
  return _.reduce( _.map( items, function( item ) { return row( item ); }),
                   function( row, memo ) { return row.concat( memo ); }, "");
}

var table = _.template('<table data-src="#{ id }">#{ rows(items) }</table>');

请注意，该函数可以使用 for 循环来实现，但这里的关键是它是在一个函数中定义的，并且它是您从模板rows内部使用的那个函数。table然后在渲染模板时评估此函数，为每一行调用模板并将它们连接起来。

Underscore 的模板引擎真的很小。如果你想要更复杂的东西，内置迭代器和块助手，我建议你看看handlebars。

无论如何，我认为这个解决方案使逻辑与要生成的实际标记很好地分开，因此清晰且易于维护。

于 2013-06-13T21:34:06.980 回答