Question

我有一个搜索功能，允许用户按产品过滤掉。通常，我会有以下内容：

// Routes
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      keyword: params.keyword,
      products: this.store.find('product', { name: params.keyword, status: 'available' })
    });
  },

  setupController: function(controller, model) {
    controller.set('content', model);
  }
});

在模板中：

// Template
{{#if products.length}}
  <ul>
    {{#each products}}
      <li>
        Name: {{name}}
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>No products</p>
{{/if}}

哪个有效。但是，如果我想要一个搜索API端点来处理产品过滤...

路线中的模型挂钩怎么样？我应该创建一个Ember搜索模型吗？这是正确的方法吗？

如果没有，我应该使用Ember.$.ajax吗？其他方法？

Answer 1

Ember.js提供了在资源级别处理_query_ing数据的工具。这是一个建议的解决方案，然后是一些更接近您期望的其他选项。

预期用例

在Ember中，您不必映射您的＆＃34;表示＆＃34;数据到服务器端点。您不必使用您的Ember路线（如URL）。
在Ember，一个＆＃34;代表＆＃34;数据（例如控制器和视图集）可以查询多个数据源。
使用＆＃34; q＆＃34;用于资源全文搜索的参数。
所有这些背后的要点是，降低后端API的复杂性。如果您为一个资源构建搜索和查询系统，则可以将其重复用于后端的所有其他资源。

创建搜索网址

// in your router
this.route('search')

创建搜索路线以获取所需数据

Ember.RSVP.hash({
  stores: this.store.find('store', {
    rate_minimum: 4.0,
    near: 'lat:long',
    q: 'local store name'
  }),

  products: this.store.find('product', {
    price_maximum: '$50',
    near: 'lat:long',
    q: 'famous shoe brand'
  })
});

快速反应方式

使用Store#pushPayload

从搜索终结点使用Ember.$.ajax下载数据。请记住，只要您的数据有名称，就可以使用Store#pushPayload将多个不相关的数据类型加载到Ember Data的商店中。

在您的路由model挂钩中，使用this.store.all('product')返回内存中的所有产品而不发送请求。在未来的某个时刻，Ember将更新此阵列。您可以使用Ember.RSVP来代表＆＃34;代表＆＃34;不止一种资源。

在您的控制器中，使用filterBy等阵列操作为用户提供实时更新。查询旁边向API发出新请求以获取更多相关数据。

这导致在等待后端回复并立即更新＆＃34;表示＆＃34;时立即响应。具有后端响应的数据。

Ember无数据方式

创建搜索路径
使用Ember.$.ajax获取数据
将其作为路线model挂钩
每当用户更改搜索条件时发送另一个ajax请求

Answer 2

我认为你不会做任何不同的事情。当您使用查询参数执行store.find时，在您的情况下{name：params.keyword，status：'available'}，查询返回的结果将显示在控制器中;假设您正在使用ArrayController。您的模型和控制器不需要更改，您只需根据结构查询的方式控制您想要的内容。

// display all models that are in the store    
store.find('someModel')  

// display a single model   
store.find('someModel', 123) // will display a single model

// display only models that match the query
store.find('someModel', { name: params.keyword, status: 'available' }

现在，如果您正在处理不符合规范的端点，即。您的搜索端点不只是/ products？name = some-name＆amp; status = available，那么您可能需要稍微修改您的适配器以处理差异。在适配器中执行此操作意味着您仍然拥有一个简单的控制器/路由/模型，并且您隐藏了适配器中端点特有的复杂性。

如何实现搜索功能？

2 个答案:

预期用例

快速反应方式

Ember无数据方式