Question

我正在尝试过滤掉Underscore模板中的元素。例如，我只想返回没有类名“pin”的元素。任何人都知道如何使用下划线方法或jquery

来做到这一点

var renderToHTML = function( data ) {
    var list = data.results[0].items;
    var tmpl = $( template({items : list}) );
    // var layout = tmpl.filter()
}

我的模板代码如下所示。

<% _.each(items,function(item,i){ %> 
    <% var cls=( item.id == 'feature') ? "pin" : 'item'; %>
    <div class="<%=cls%> <%=item.id%>" style="width:<%=item.width%>px">
        <div class="itemInner">
            <img src="<%= item.img %>" />
            <div class="title"><%= item.title %></div>
        </div>
    </div>
<% }); %>

Answer 1

如果您想从生成的HTML中提取<div>一类pin，那么您可能想要使用:not：

$(':not(.pin)')
$('some_prefix_for_specificity :not(.pin)')
$some_root_element.find(':not(.pin)')
//...

或者，考虑到模板中的逻辑，您可以改为寻找.item：

$('.item')
$('some_prefix_for_specificity .item')
$some_root_element.find('.item')
//...

如果您只想在模板中出现的HTML中包含非pin，那么：

<% _.each(items, function(item, i) { %>
    <% if(item.id != 'feature') { %>
        <div class="item <%= item.id %>" style="width: <%= item.width %>px">
            <!--...-->
        </div>
    </div>
<% }); %>

或者也许使用_.chain和_.filter：

<% _(items).chain().filter(function(item) { return item.id != 'feature' }).each(function(item, i) { %>
    <div class="item <%= item.id %>" style="width: <%= item.width %>px">
        <!-- ... -->
    </div>
<% }); %>

如果您想在此级别执行此操作：

var tmpl = $(template({items : list}));

然后你想使用jQuery的filter代替find：

var not_pins = tmpl.filter(':not(.pin)');

或者，再次，给出模板的具体结构：

var not_pins = tmpl.filter('.item');

过滤下划线模板中的项目

1 个答案: