mercredi 6 décembre 2017

Ember.js computed property to return model ID array?

All I'm trying to do is create an array containing a list of current ID's in the model to use in a child component, but somehow seem to be missing something obvious. If it is relevant, I am using Ember 2.17.0 with Ember Data 2.17.0 as well.

The route returns an array of models very similar to a findAll, but modified to work with a REST endpoint I do not have any control over. I need an array of the id's from the model to use in a component embedded in the route. This is how I currently have the computed property structured, but it is not working.

searchIdArray: computed('model', () => {
  return this.get('model').map((record) => record.id);
})

Just in case the greater context is useful, here is the rest of the router file. The query method is nonstandard due to having to modify the adapter to work with the REST endpoint I do not have control over. It is working great. The difficulty is in making the computed property work.

// app/route/reaches.js

import Route from '@ember/routing/route';
import { computed } from '@ember/object';

// array of fields being queried
const fieldArray = ['name', 'riverName', 'riverAlternateName'];
const reachIdField = 'reachId';

// build a query statement for submitting to an ArcGIS Online
let createQuery = (queryString) => {

  // trim whitespace, remove non word characters, and split words into array
  let queryStringArray = queryString.replace(/[\W_]+/g, ' ').split(' ');

  // create all permutations of fields and words into a single array
  let queryArray = [];
  for (let i=0; i < fieldArray.length; i++) {
    let wordQueryArray =queryStringArray.map((thisQuery) => `${fieldArray[i]} LIKE '%${thisQuery}%'`);
    queryArray.push('(' + wordQueryArray.join(' AND ') + ')');
  }

  // collapse all the individual field query statements into a single statement
  return queryArray.join(' OR ');
};

export default Route.extend({

  // this ensures the url stays in sync with the search string
  queryParams: {
    search: {
      refreshModel: true
    }
  },

  model(params){

    // ensure leading and trailing spaces are not being sent as part of query
    let searchString = params.search.trim();

    // check if this is a number, not a normal string
    if (!isNaN(parseFloat(searchString)) && isFinite(searchString)) {

      // build a query to search the reachId
      let query = `${reachIdField} LIKE '${searchString}%'`
      return this.get('store').query('reach', query);

    // if however, the search IS a number
    } else {

      // don't actually search unless at least three characters
      if (searchString.length >= 3){

        // build a query searching in the river and reach name fields
        return this.get('store').query('reach', createQuery(searchString));

      } else {

        // unload the search results
        return this.get('store').unloadAll();
      }

    }

  },

  // for keeping track of id's from returned reaches
  searchIdArray: computed('model', () => {
    return this.get('model').map((record) => record.id);
  })

});

Thank you in advance for any help or guidance you may be able to offer.




Aucun commentaire:

Enregistrer un commentaire