0

我从 xml 提要创建一个主干集合。xml 提要返回 110 篇文章（它是外部的，无法返回更少）。我像这样加载到 Backbone 集合中：

        parse: function (data) {
            xml = data;

            $(xml).find('item').each(function (index) {
                title = $(this).find('title').text();
                description = $(this).find('description').text();
                author = $(this).find('author').text();
                pubDate = $(this).find('pubDate').text();
                img = $(description).find('img:first');
                if(img.length){
                    src = img.attr('src');
                }
                parsed.push({id:id, title: title, author:author, 
                            description:description, pubDate:pubDate, src:src});

            });

            return parsed;
        },

然后，我在列表底部显示前 10 个项目，并带有“加载更多”按钮。当用户单击“加载更多”时，我想从骨干集合中加载接下来的 10 个项目。在视图中，我这样做：

    loadMore: function(){
        var ul = $('#news-list');
        var id = ul.find('li:last-child').data("id");
        var li="";
         _.every(this.collection.toJSON(), function(item) {
                if(item.id>id){
                    li += '<li class="topcoat-list__item" data-id="'+item.id+'">';
                    li += '<a href="#news-item/<%= item.id %>">';
                    li += '<img height="30" width="30" src="'+item.src+'">';
                    li += '<p>'+item.title+'</p>';
                    li += '<p>'+item.pubDate+'</p>';
                    li += '<span class="chevron"></span>';
                    li += '</a>';
                    li += '</li>';
                }  

                if(item.id>(id+10)){
                    console.log('in loadMore if');
                    return false;
                }
                return true;
        });
        ul.append(li);
    }

因此，每个循环循环通过前 10 个项目，在它们已经加载时跳过它们（并且小于最后一个 li 孩子的 id），然后在接下来的 10 个中创建列表元素 html，然后退出。不过，这似乎效率低下。有没有更好的方法来完成这个过程？

4

1 回答 1

0

第一：考虑为 li 元素使用下划线模板，这样在不使用连接字符串生成 html 代码块的情况下会更容易。

第二：如果您认为循环效率低下，只需从您需要的项目开始（基于您的代码，未经测试，只是跳过不需要的循环）

var ul = $('#news-list');
var id = ul.find('li:last-child').data("id");

for (var i=(0+id);i<=(9+id);i++){ 

  var item = this.collection.at(i).toJSON();
  var li="";
  li += '<li class="topcoat-list__item" data-id="'+item.id+'">';
  li += '<a href="#news-item/<%= item.id %>">';
  li += '<img height="30" width="30" src="'+item.src+'">';
  li += '<p>'+item.title+'</p>';
  li += '<p>'+item.pubDate+'</p>';
  li += '<span class="chevron"></span>';
  li += '</a>';
  li += '</li>';

  ul.append(li);
}

使用下划线：

var ul = $('#news-list');
var id = ul.find('li:last-child').data("id");

for (var i=(0+id);i<=(9+id);i++){ 
  var li= _.template( $('#li-template').html(), {"item":this.collection.at(i).toJSON() } );
  ul.append(li);
}

$('#li-template').html() 就像：

<li class="topcoat-list__item" data-id="<%= item.id%>">
<a href="#news-item/<%= item.id %>">
<img height="30" width="30" src="<%= item.src%>">
<p><%= item.title %></p>
<p><%= item.pubDate %></p>
<span class="chevron"></span>
</a>
</li>
于 2013-11-07T13:50:41.017 回答