EmberJS 2.7 - コンポーネント内の無限モデルアドオン - infinityLoadアクションをバブルアップする方法

Question

私は素晴らしいプラグインinfinity-loaderを使用しています。それは、それが束縛されているルートのテンプレート上で使用することを条件に、素晴らしい動作をします。

しかし、多くの人のように、今ではコンポーネントでそれを試してみることにしました。まあ。私はどのようにバブルを送信/ this fiddle showsとthis questionのようなアクションを送信する方法を理解しています。

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

奇妙なのは、最初のページの後に、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からthis great add-onを使ってこの問題を解決して、ルートにアクションを送信しました。アドオンは動作しますが、自分のコードは動作しません。イベント以下のコードで

UPDATE

今まで泡と私はページをスクロールするとき、私は警告を取得します。しかし、今私はローダー（基本的にルートの孫である）に次のページをロードする方法を理解する必要があります。

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

Thisその部分を理解するのを助けました。

Answer 1

だから、最終的には無限大-Loaderコンポーネントの開発者からいくつかの入力で、これはコンポーネントでそれを使用するために必要とされるものです。

アプリ/コンポーネント/従業員list.js：

infinityLoadAction: 'infinityLoad', 

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

infinityLoadは、テンプレートにローダーがあると自動的に起動します。あなたはちょうど上記のようにそれをキャッチして投げる必要があります。

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

Answer 2

私はあなたが

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

と

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

01にこの

actions: { 
    infinityLoad() { 
     this.sendAction('sendThisAction'); 
    } 
    } 

を変更するに

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

を変更すると、あなたの問題を解決することができたと

また、私はあなたのコードを持っていないとして、私はデバッグすることはできませんが、コンポーネントに事実に基づいて、どのように、のは、それを試してみるましょう

infinityLoad() { 
     this.loadMore(); 
     } 

を変更するには、この

infinityLoad() { 
     this.get('infinityModel').loadMore(); 
     } 

に疑いがあるのですうまくいくはずです。 それが動作していない場合は私に知らせてください、またはおそらくあなたはライブバージョンを共有することができます。