Kullanıcı ilerlemek için öğeleri büyük bir numarası vardır ve sonsuz kaydırma uygulamak içeriğin aşamalı yükleme etkinleştirmek istediğim bir görünümü var.

Bazıları have done pagination gibi görünüyor ama Google herkesi Kor/Ember Veri ile sonsuz listeler yaptılar nasıl tartışıyor getirmez. Herkes zaten bu işe yaradı ve paylaşmak örneği/blog bir posta kodu var mı?

GitHub Dashboard projectşu anda geliştirmekte olduğum en sonsuz kaydırma mekanizması ettim. Özelliği 68d1728 taahhüt eklenir.

Temel fikir görünüm, Geçerli Görünüm penceresi görünür kontrol loadMore yöntem her zaman çağıran LoadMoreView sahip olmaktır. inview bunun için jQuery eklentisi kullanıyorum. Belirtilen seçici unsur ekranda görünür ve kaybolur. inview bir olay, kayıt için izin verir.

Kumanda da yüklemek için daha fazla öğe olup olmadığını gösteren ve şu anda öğeleri getirilen " olmazsa olmaz özellikleri vardır. Bu özellikler canLoadMore isLoading denir.

LoadMoreView temel olarak bu gibi görünüyor:

App.LoadMoreView = Ember.View.extend({
  templateName: 'loadMore',
  didInsertElement: function() {
    var view = this;
    this.$().bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
      if (isInView) Ember.tryInvoke(view.get('controller'), 'loadMore');
    });
  }
});

loadMore şablon aşağıdaki gibi tanımlanır

{{#if isLoading}}
    fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
{{else}}
    {{#if canLoadMore}}
        <a {{action "loadMore" target="controller" }}>click to load more items</a>
    {{else}}
        <i>no more items</i>
    {{/if}}
{{/if}}

Daha fazla öğe getirilirken işleyen denetleyicisi, daha sonra aşağıdaki gibi uygulanır. loadMore yöntemi deposu sorgusu gerçekleştirilen, model girdileri, belirli bir sayfa yükler unutmayın.

App.EventsController = Ember.ArrayController.extend({
  currentPage: 1,

  canLoadMore: function() {
    // can we load more entries? In this example only 10 pages are possible to fetch ...
    return this.get('currentPage') < 10;
  }.property('currentPage'),

  loadMore: function() {
    if (this.get('canLoadMore')) {
      this.set('isLoading', true);
      var page = this.incrementProperty('currentPage');

      // findQuery triggers somehing like /events?page=6 and this
      // will load more models of type App.Event into the store
      this.get('store').findQuery(App.Event, { page: page });
    } else {
      this.set('isLoading', false);
    }
  }
});

Kalan tek şey, başlangıçta set content kontrol sonucu filter işlevi, content Çin yeni modelleri yüklendi mağazaya (olan şey yüzünden findQuery yöntemi loadMore kontrol). Ayrıca, query karma filter çağrıldığında eklenir. Bu sunucuya ilk sorgusu yapılmış olmasını sağlar.

App.eventsController = App.EventsController.create({
    content: []
});

var events = App.store.filter(App.Event, { page: 1 }, function(data) {
    // show all events; return false if a specific model - for example a specific
    // type of event - shall not be included
    return true;
});