Tengo una aplicación de búsqueda existente que construí en el lado del servidor que utiliza elasticsearch procesada por python / flask. En el lado del cliente, está utilizando JS / jQuery y manillares para analizar y presentar los datos.

Me gustaría ir un paso más allá y construirlo en ascua, ya que los "controles" (filtros, clasificación, paginación, etc.) lo convierten en un candidato perfecto para un SPA.

Entiendo los fundamentos de las brasas, pero siento que me he topado con una pared con datos de brasas, es decir, cómo llevar mis datos a la tienda para poder vincular acciones. ¿Alguien puede señalarme en la dirección correcta?

Se accede a mi API JSON existente de esta manera:

http: // localhost: 8000 / search? q = shirt & paging = 18 & filter-price = 100

Y devuelve JSON así:

{
  "aggregations": {
    "breadcrumb": [], 
    "color": [], 
    "price": [], 
    "size_apparel": [],
    "size_jewelry": []
  }, 
  "meta": {
    "agg_list": [], 
    "default_sort": "", 
    "key_translations": {}, 
    "paging": 18, 
    "paging_options": [], 
    "sort_methods": [],
    "from": 0, 
    "hits": 89, 
    "pages": 5, 
    "q": "shirt"    
  }, 
  "results": [
    {
      "creation_date": "", 
      "image": "", 
      "images": {
        "altimg1": "", 
        "large": "", 
        "regular": "/", 
        "small": ""
      }, 
      "name": "This Product", 
      "price": "19.95", 
      "skuid": "ABC123", 
      "url": "shirt.html"
    }, 
    {...}, 
    {...}
  ] 
}

¿Es utilizable o necesito reescribir el back-end? He jugado con el acceso a los datos y tengo algo muy duro trabajando. De hecho, puedo ver los datos de "resultados", pero NO TENGO IDEA sobre cómo acceder a los datos de "meta" y "agregaciones". Creo que creo se trata de "múltiples modelos en la carga útil de Sam" y RSVP.hash debería funcionar ... pero ember-data parece tener un requisito de que cada modelo tenga una identificación. Eso tiene sentido para el modelo de "resultados", pero no para las agregaciones y definitivamente no para el meta.

Por ahora solo quiero que aparezca.

Para empezar, mi adaptador es:

export default DS.RESTAdapter.extend({
    host: 'http://localhost:8000',
    pathForType() {
        return 'search';
    }
});

El controlador de prueba es:

export default Ember.Controller.extend({
  queryParams: ['q','paging'],
  q: 'shirt',
  paging: '18'
});

Mi modelo de 'resultado' es:

const { attr } = DS;

export default Model.extend({
    'creation_date': attr('string'), 
    'has_pricerange': attr('string'), 
    'image': attr('string'), 
    'name': attr('string'), 
    'price': attr('string'), 
    'skuid': attr('string'), 
    'url': attr('string')
});

Ruta:

export default Ember.Route.extend({
  model(params) {
    return this.store.query('result', { 
        q: params.q,
        paging: params.paging
    });   
  }
});

Serializador:

export default DS.RESTSerializer.extend({
    primaryKey: 'skuid'
});

Esto es muy fácil de hacer con jquery: solo $ .get y luego accede a los datos con notación de objeto. Sé que ember no es jquery, pero parece que debería ser más fácil acceder a los datos. ¿Me estoy perdiendo de algo? Tomando el enfoque equivocado? ¿Debo comenzar desde cero?

0
tarponjargon 3 feb. 2017 a las 18:49

2 respuestas

La mejor respuesta

Ember Data es una gran pieza del rompecabezas de Ember, pero de ninguna manera se requiere. Si usted debe usar Ember Data realmente depende de la naturaleza de sus datos, el control de su API y su capacidad de prueba futura deseada

Naturaleza de sus datos

Ember Data realmente sobresale en sus datos típicos de tipo de modelo / entidad. "Cosas" que tienen atributos y pueden relacionarse entre sí. Si sus datos siguen ese patrón, entonces Ember Data podría ser una gran opción.

Control de tu API

Como se menciona en la otra respuesta, obtienes mucho gratis si puedes comprar en un formato JSON API. Esto se ha convertido en el estándar para Ember Data, pero no es exclusivo de Ember. Muchas opciones del lado del servidor tendrán formas de serializar estos recursos fácilmente con muchos marcos existentes. Si no puede cambiar los datos que provienen del servidor, o si es más fácil manejarlos en el front-end, puede seguir el camino de la personalización de los adaptadores / serializadores en Ember.

Capacidad de futuro deseada

Ember Data le permite cambiar el adaptador / serializador mientras mantiene sus modelos intactos. Esto es deseable si desea que su aplicación maneje diferentes fuentes en el futuro, tal vez cambie de usar su propia API a usar un almacenamiento local o un servicio de terceros como firebase. Si no planea cambiar mucho, puede hacer sus llamadas básicas de ajax y devolver una promesa dentro de su enlace model y Ember funcionará más o menos igual. Recomendaría usar ember-network, que se especifica en la API fetch y probablemente será cada vez más compatible como una solicitud compatible con FastBoot.

Otras cosas a tener en cuenta es que Ember Data y el uso del Ember Object pueden ser pesados dependiendo de la cantidad de instancias de cada modelo que pasará.

Otros también están abordando este problema. Toran Billups ha sacado el patrón redux con ember-redux, que es otra gran forma de pensar sobre cómo enfocas tus datos.

Su caso de uso

Entonces podrías:

Utilice datos de ascuas con find

Echando un vistazo a la forma de sus datos, parece que está proporcionando más un servicio de búsqueda que la consulta de modelos / entidades específicos. Ember Data tiene un find, pero la cantidad de metadatos que proporciona puede estar sobrecargada para el caso de uso del modelo.

Olvide Ember Data y use el punto final de búsqueda

model: function(params), use los parámetros del gancho del modelo para construir la url hasta el punto final de la búsqueda y devuelva una promesa (agregue then según sea necesario para dar forma a los datos)

Consultar el punto final de búsqueda (refactor de API)

Idea similar a la anterior, pero usaría obtener los identificadores del producto y usarlos para consultar los productos en el almacén de datos de Ember.

Algo similar a:

fetch("service-end-point?with=queryparams")
  .then(result => {
    return {
      products: this.store.findMany(Product, result.ids);
    };
  });

Creo que sería más fácil comenzar simplemente manejando y dando forma a los datos directamente en el controlador, y omitiendo Ember Data. Si desea enlaces de propiedades calculadas específicas, no hay ninguna razón por la que pueda extender Ember.Object con la forma que desee y luego usar algo como .map para tomar el resultado de la solicitud de red y aplicarlo como payload => Object.create(payload).

Avíseme si tiene alguna pregunta sobre alguna de estas ideas.

3
Chad Carbert 3 feb. 2017 a las 21:52

Le recomiendo que lea esto sección de la guía, específicamente un poco sobre $.getJSON. Ember está diseñado para usar una tienda poderosa. Es mucho más fácil de usar si está utilizando una API estándar (por ejemplo, API JSON); solo puede usar el código de datos Ember directamente. Pero si no, tendrá que escribir un código de serializador para que Ember sepa cómo usar su API. Sin embargo, una vez hecho esto, su código de componente no se combinará con su código de recuperación de datos.

Sin embargo, puede usar $ .getJSON si todavía está creando prototipos.

1
AlexMA 3 feb. 2017 a las 16:22