EmberJS 2.7 - 组件内的无限模型附加组件 - 如何 'bubble up' infinityLoad 操作

Question

我正在使用很棒的插件 infinity-loader。如果我在绑定到的路线模板上使用它，效果很好。

但是像很多人一样，现在我决定尝试在组件上使用它。哦亲爱的。我了解如何 bubble/send 像 this fiddle shows and this question 这样的操作解释。

遗憾的是this, this and this没有帮助。

奇怪的是，在第一页之后，Infinity 附加组件会触发操作 infinityLoad - 如果我删除组件中的处理程序，那么我会在控制台中看到错误 'nothing handled' 操作，所以我知道当我滚动到列表末尾时动作正在触发。

但是当我的组件 'bubbles it up' 它似乎只是在路由中被吞没并且不会导致加载项触发其自己的内部处理程序。

/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 来解决这个问题，以便将操作发送到路由。附加组件有效，但我的代码无效。

更新

使用下面的代码，事件现在会冒泡，当我滚动页面时，我会收到警报。但是现在我需要弄清楚如何让加载程序（基本上是路由的孙子）加载下一页。

/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

我假设你可以通过改变

来解决你的问题

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

让我们试一试，因为我没有你的代码我无法调试，但基于组件的事实以及我们如何传递它来路由它应该有望工作。如果它不起作用，请告诉我，或者您可以共享实时版本。

Answer 2

最后，根据 infinity-loader 组件开发人员的一些意见，这就是在组件中使用它所需要的：

app/components/employee-list.js:

  infinityLoadAction: 'infinityLoad',

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

当您的模板中有加载程序时，infinityLoad 会自动触发。你只需要像上面那样 'catch and throw' 就可以了。

此外，您不需要在路由中添加任何代码来捕获它，因为 infinity-loader 将捕获您从组件抛出的 infinityLoadAction。

EmberJS 2.7 - 组件内的无限模型附加组件 - 如何 'bubble up' infinityLoad 操作

EmberJS 2.7 - infinity-model add-on inside a component - how to 'bubble up' the infinityLoad action

ember.js

ember-router

ember-components