如何使用 Ember 数据缓存随机结果？

Question

感谢阅读本文并提供帮助的人。我将描述什么已经在起作用，然后我想去哪里（我不知道）：

工作原理： 在 EmberJS 组件中，有一个按钮可以使用来自给定 EmberData 对象集合的随机字符串填充文本框。 model() 函数从 API 中查询所有对象，然后 random_search() 函数从列表中随机选择一个并将其插入到文本框中。到目前为止的代码如下所示：

在componennt.js:

export default Component.extend({
  store: service('store'),
  model() {
    return this.store.findAll('randomsearchitem').then(function(items) {
      return items.map(function(item) {
        return {id: item.get('id'), funnnystory: item.get('funnystory')};
      })
    });
  },
  actions: {
    random_search() {
      this.model().then(function(items) {
        $('#searchbar-searchtext').val(items[Math.floor(Math.random() * items.length)]['id']);
        $('#searchbar-form').submit();
      });
    }
  }
}

在view.hbs:

<button onclick={{action "random_search"}}>I'm Feeling Lucky!</button>

我想要什么： 我想要：

1. model() 从 API 查询 15 个随机对象并将它们缓存在本地，在页面加载之间保持不变。 API 可能会有 1000 个列表，如果可能的话，我想在客户端实现这个逻辑。如果这是 SQL，查询将类似于 SELECT * FROM 'randomsearchitems' LIMIT 15
2. random_search() 选择一项，使用它，然后从缓存中丢弃它
3. 一旦所有 15 个字符串都使用过一次，我想再次调用 API 以获得 15 个字符串的新列表
4. 不必强制执行唯一性 - 如果新对象列表包含之前列表中存在的对象，那没关系

谢谢

Answer 1

我知道这并不完全符合您的要求，但我会让后端提供随机的 15 项，并使用以下代码。

export default Route.extend({
  async model() {
    let response = await fetch('/api/whatever-endpoint');
    let json = await response.json();

    return { items: json };
  }
});

然后，在控制器中

export default Controller.extend({
  searchText: '',

  actions: {
    didSubmitForm() {
      // do something here on submit
      // fetch again? add item to list?
      // depends!
    }
    search() {
      let items = this.model.items;
      let randomId = items[Math.floor(Math.random() * items.length].id

      $('#searchbar-searchtext').val(randomId);
      $('#searchbar-form').submit(); // or call a native function here
    }
  }
});