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

所以最后从 infinity-loader 组件的开发者那里得到一些输入，这就是在组件中使用它所需要的：

应用程序/组件/员工列表.js：

  infinityLoadAction: 'infinityLoad',

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

当infinityLoad您的模板中有加载器时，它会自动触发。你只需要像上面那样“抓住并扔掉”它。

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

于 2016-09-16T10:53:16.800 回答
0

我假设你可以通过改变来解决你的问题

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

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

于 2016-09-09T14:35:14.803 回答