1

私は素晴らしいプラグインinfinity-loaderを使用しています。バインドされているルートのテンプレートで使用すると、うまく機能します。

しかし、多くの人と同じように、コンポーネントで使用することにしました。まあ。このフィドルショーのようなアクションをバブル/送信する方法を理解しており、この質問が説明しています。

悲しいことに、これ、これ、およびこれは役に立ちませんでした。

奇妙なのは、最初のページの後、Infinity アドオンがアクション infinityLoad を起動することです。コンポーネントでハンドラーを削除すると、コンソールにアクションが「何も処理されていません」というエラーが表示されるので、アクションがリストの最後までスクロールすると発火します。

しかし、コンポーネントが「泡立つ」と、ルートに飲み込まれたように見え、アドオンが独自の内部ハンドラーを起動しません。

/templates/employees/index.hbs

{{employees-list employeeModel=model sendThisAction='infinityLoad'}}

/routes/employees/index.js

import Ember from 'ember';

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

export default Ember.Route.extend(InfinityRoute, {
    totalPagesParam: "meta.total",

    model() {
        return this.infinityModel("employee", { perPage: 10, startingPage: 1 });
    },

    // is this really needed, because my understanding is this action is automatically handled by the addon?
    actions: {
      infinityLoad() {
        this.get('infinityModel').loadMore();
      }
    }
});

/templates/components/employee.hbs

<div class="list-group">
    {{#each employeeModel as |employee|}}
      <...display some employee stuff ...>
    {{/each}}
</div>
{{infinity-loader infinityModel=employeeModel}}

/components/employee-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    infinityLoad() {
      this.sendAction('sendThisAction');
    }
  }
});

注アクションをルートに送信するために、Dockyardのこの優れたアドオン を使用して、この問題を解決しようとしました。アドオンは機能しますが、私のコードは機能しません。

アップデート

以下のコードを使用すると、イベントがバブルアップし、ページをスクロールするとアラートが表示されます。しかし、次のページをロードするローダー (基本的にはルートの孫) を取得する方法を理解する必要があります。

/templates/employees/index.hbs

{{employees-list employeeModel=model infinityLoad='infinityLoad'}}

/routes/employees/index.js

import Ember from 'ember';

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

export default Ember.Route.extend(InfinityRoute, {
    totalPagesParam: "meta.total",

    model() {
        return this.infinityModel("employee", { perPage: 10, startingPage: 1 });
    },

    // is this really needed, because my understanding is this action is automatically handled by the addon?
    actions: {
      infinityLoad() {
        alert('here we are'); <- test
      }
    }
});

/templates/components/employee.hbs

<div class="list-group">
    {{#each employeeModel as |employee|}}
      <...display some employee stuff ...>
    {{/each}}
</div>
{{infinity-loader infinityModel=employeeModel}}

/components/employee-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    infinityLoad() {
      this.sendAction('infinityLoad');
    }
  }
});

これは、その部分を理解するのに役立ちました。

4

2 に答える 2

2

最後に、インフィニティ ローダー コンポーネントの開発者からのいくつかの入力により、これをコンポーネントで使用するために必要なものは次のとおりです。

app/components/employee-list.js:

  infinityLoadAction: 'infinityLoad',

  actions: {
    infinityLoad(employeeModel) {
      this.sendAction('infinityLoadAction', employeeModel);
    }
  }

infinityLoadテンプレートにローダーがあると、自動的に起動されます。上記のように「キャッチアンドスロー」するだけです。

また、それをキャッチするためにルートにコードを追加する必要はありません。これは、 がコンポーネントからスローしたinfinity-loaderをキャッチするためです。infinityLoadAction

于 2016-09-16T10:53:16.800 に答える