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

したがって、 each ループは最初の 10 個の項目を循環し、それらが既に読み込まれている (最後の li 子の id より小さい) ためスキップし、次の 10 個でリスト要素 html を作成して終了します。しかし、これは非効率に思えます。このプロセスを行うためのより良い方法はありますか?

4

1 に答える 1

0

まず、li 要素にアンダースコア テンプレートを使用することを検討してください。これにより、連結された文字列を使用して html コード ブロックを生成しなくても、はるかに簡単になります。

2番目：ループが非効率的であると考える場合は、必要な項目から始めてください（コードに基づいて、テストされておらず、不要なループをスキップするだけです）

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 に答える