EmberJS 2.7-組件內部的infinity-model附加組件-如何“起泡” infinityLoad動作

Question

我正在使用很棒的插件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的這個很棒的插件來解決此問題， 該插件將動作發送到路線。 加載項有效，但我的代碼無效。

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

這有助於弄清楚那部分。

Answer 1

因此，最后，從infinity-loader組件開發人員的一些輸入中，這就是在組件中使用它所需要的：

應用/組件/雇員-list.js：

  infinityLoadAction: 'infinityLoad',

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

當您的模板中有加載程序時，會自動觸發infinityLoad 。 您只需要像上面一樣“捕捉並扔”它。

同樣，您不需要在路由中添加任何代碼來捕獲它，因為infinity-loader將捕獲您從組件中拋出的infinityLoadAction 。

Answer 2

我想你可以通過改變來解決你的問題

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

至

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

並改變這個

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

至

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

我對此也有所懷疑

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

與改變

 infinityLoad() {
        this.loadMore();
      }

讓我們嘗試一下，因為我沒有您的代碼，我無法調試，但是基於組件的事實以及我們如何將其傳遞給路由應該可以正常工作。 如果無法正常工作，請告訴我，或者您可以共享實時版本。