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()选择一项，使用它，然后将其从缓存中丢弃
一旦全部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数据缓存随机结果？

1 个答案: