如何使用 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>

我想要的： 我想要：

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

谢谢

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

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

How to cache random results using Ember data?

javascript

ember.js

ember-data

ember-components