ember.js를 사용한 무한 스크롤 (지연 로딩)

ember.js를 사용한 무한 스크롤 (지연 로딩)

---

사용자가 스크롤 할 수있는 많은 항목이있을 수있는보기가 있고 콘텐츠를 점진적으로로드 할 수 있도록 무한 스크롤을 구현하고 싶습니다.

일부 사람들 은 페이지 매김을 한 것처럼 보이지만 Google은 Ember / Ember Data로 무한 목록을 수행 한 방법에 대해 아무도 논의하지 않습니다. 누구나 이미이 작업을 수행했으며 공유 할 블로그 게시물 / 예제 코드가 있습니까?

---

새로 출시 된 Ember.ListView 컴포넌트에 대해 알고 계셨습니까?

https://github.com/emberjs/list-view

2 월 샌프란시스코 Ember Meetup에서 발표되었습니다. Ember Core 개발자 중 한 명인 Erik Bryn의 슬라이드 데크가 있습니다.

http://talks.erikbryn.com/ember-list-view/

---

GitHub Dashboard 프로젝트 에서 무한 스크롤 메커니즘을 구현했으며 현재 개발 중입니다. 이 기능은 커밋 68d1728에 추가됩니다 .

기본 아이디어는 뷰가 현재 뷰포트에 표시 될 때마다 컨트롤러 LoadMoreView에서 loadMore메서드 를 호출하는 입니다. 나는 이것을 위해 jQuery 플러그인 inview 를 사용하고 있습니다. inview지정된 선택기의 요소가 화면에 표시되고 사라질 때 시작 되는 이벤트 에 등록 할 수 있습니다 .

컨트롤러에는로드 할 항목이 더 있는지 여부와 현재 가져온 항목이 있는지 여부를 나타내는 속성도 있습니다. 이러한 속성을 canLoadMore및 isLoading.

은 LoadMoreView기본적으로 다음과 같습니다 :

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다음과 같이 템플릿을 정의한다 :

{{#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}}

더 많은 항목 가져 오기를 처리하는 컨트롤러는 다음과 같이 구현됩니다. 이 loadMore메소드에서는 모델에 대한 특정 항목 페이지를로드하는 상점에 대한 조회가 수행됩니다.

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

남은 것은 처음 content에 컨트롤러의를 filter함수 의 결과로 설정하는 것이므로 content새 모델이 저장소에로드 될 때 업데이트됩니다 ( 컨트롤러 findQuery의 loadMore의 메서드 로 인해 발생 함 ). 또한 이 호출 query될 때 해시가 추가 filter됩니다. 이렇게하면 서버에 대한 초기 쿼리가 수행됩니다.

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

---

@pangratz의 작업을 기반으로 Ember 용 무한 페이지 매김 플러그인을 작성 중 입니다.

Please fire any issues on there if you have questions or improvements that you'd like.

---

I would recommend using Ember Infinity addon. It supports Ember 1.10 through to 2.0+. It's relatively easy to setup. You only need to modify your route and template.

Route (Product is example model):

import InfinityRoute from 'ember-infinity/mixins/route';

export default Ember.Route.extend(InfinityRoute, {
  model() {
    /* Load pages of the Product Model, starting from page 1, in groups of 12. */
    return this.infinityModel('product', { perPage: 12, startingPage: 1 });
  }
});

Template:

{{#each model as |product|}}
  ...
{{/each}}

{{infinity-loader infinityModel=model}}

When {{infinity-loader}} component becomes visible it sends an action to your route, so it knows to update model array with new (fetched) records.

First request will be sent to:

/products?per_page=12&page=1

So you also need to prepare your backend API to handle these query params. It's obviously customizable, take a look at Advanced Usage section of Readme.

Note:

Both using ListView (@commadelimited's answer) and views with ArrayController (@pangratz's answer) is deprecated/removed as of Ember 2.0 being stable version.

ReferenceURL : https://stackoverflow.com/questions/11907093/infinite-scroll-with-ember-js-lazy-loading