时间戳

首页 > 解决方案 > 如何使用 Ember 数据缓存随机结果？

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

问题描述

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

工作原理： 在 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. 不必强制执行唯一性——如果新对象列表包含上一个列表中存在的对象，那没关系

谢谢

标签： javascriptember.jsember-dataember-components

解决方案

我知道这不完全是您所要求的，但我会让后端提供随机的 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
    }
  }
});

推荐阅读