Nondigestible Purple Mayonnaise

    ember-infinite-scroller

    0.1.1 • Public • Published

    Ember Infinite Scroller

    Ember Infinite Scroller is a component that sits at the bottom of a page of content. It calls store.find to get more content and pushes the content into a model when a user scrolls to the bottom.

    Installation

    • Install addon npm install ember-infinite-scroller --save-dev
    • Generate template and styles ember g infinite-scroller

    Implementation

    Drop the infinite scroller component into any template. There is one required param: contextController. In most cases it will be this.

    {{infinite-scroller contextController=this}}

    Other parameters are optional.

    • limit default: 12
    {{infinite-scroller contextController=this limit=30}}
    • beginInfinite default: true

    Use beginInfinite to start or stop manually. For example:

    Template:

    <button {{action 'toggleBeginInfinite'}}>Begin</button>
    {{infinite-scroller  contextController=this beginInfinite=beginInfinite}}

    Controller:

    actions: {
      toggleBeginInfinite: function() {
        this.toggleProperty('beginInfinite')
      }
    }
    • content default: the content of the contextController

    The content can be customized if the content of the infinite scroller is not the model of the controller.

    {{infinite-scroller contextController=this content=otherModel}}
    • modelName default: the name of the model of the content

    If the infinite scroller should query a different model than the content of the content, it can be overwritten.

    For example, if the content model type is 'note' but the query should be for 'comment':

    {{infinite-scroller contextController=this modelName='comment'}}
    • query default:
    {model: this.get('modelName'), params: {}, callback: null}

    The query has a required modelName and params and an optional callback.

    {{infinite-scroller contextController=this query=query}}

    Controller:

    query: function() {
      var query = {
        model: 'post',
        params: {published: true},
        callback: function(posts) {
          // do cool things with posts when they come back.
        }
      };
      return query;
    }

    Blueprint

    The blueprint template comes with some handy features, including a yield that is displayed when the infinite scroller is out of content.

    {{infinite-scroller contextController=this}}
      <span>No more content!</span>
    {{/infinite-scroller}}

    It also includes a loading spnner When the scroller is fetching content, it displays a spinner. The default is an image, but you can customize the css to change the spinner.

    Keywords

    none

    Install

    npm i ember-infinite-scroller

    DownloadsWeekly Downloads

    5

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • jondayton