脊梁骨js-解析并显示大型xml提要

Question

我正在从xml提要创建主干集合。xml提要返回110篇文章（它是外部的，无法返回更少的文章）。我加载到主干集合中，如下所示：

        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);
    }

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

Answer 1

首先：考虑对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模板”）。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>