filter comp reload model

by hamzeen hameem

HTML

3. templates: index.hbs
<pre>
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome!</h2>
  <p>
    We hope you find exactly what you're looking for in a place to stay.
    <br>Browse our listings, or use the search box above to narrow your search.
  </p>
</div>


  {{input value=filterText type='text' placeholder='Search Deal'}}

  <ul>
    {{#each filteredResults as |item|}}
      <li>{{item.id}} ->{{item.attributes.city}} | </li>
    {{/each}}
  </ul>
<pre>
2. route: index.js
<pre>import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    filter: {
      refreshModel: true
    }
  },

  model: function(params) {
    var ep = 'http://localhost:4200/api/deals';
    if(params.filter) {
      ep = 'http://localhost:4200/api/deals/city='+params.filter;
    }
    var results = [];
    $.ajax({
      url: ep,
      type: 'GET',
      accepts: 'application/json',
      success: function(data) {
        if(data.rentals) {
          data.rentals.forEach(function(deal) {
            results.addObject(deal);
          });
        } else if(data.data === 'no records found'){
          console.log('No results found');
        } else {
          data.data.forEach(function(deal) {
            results.addObject(deal);
          });
        }
      },
      error: function() {
          console.log('DEBUG: GET Deals Failed');
      },async:false
    });
    return results;
  }
});</pre>
1.controller: index.js
<pre>import Ember from 'ember';

export default Ember.Controller.extend({
  filter: '',
  filterText: '',
  queryParams: ['filter'],
  
  onFilterTextChange: function() {
    Ember.run.debounce(this, this.applyFilter, 0);
  }.observes('filterText'),
  
  applyFilter: function() {
    this.set('filter', this.get('filterText'));
    console.log('filter set: ' + this.get('filter'));
  },
  
  filteredResults: function() {
    var filter = this.get('filter');
    return this.get('model');
    /*return...

CSS

mock deals
/*jshint node:true*/
module.exports = function(app) {
  var express = require('express');
  var dealsRouter = express.Router();
  var rentals = [
      {
        type: 'rentals',
        id: 1,
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          type: 'Estate',
          bedrooms: 15,
          image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
        }
      }, {
        type: 'rentals',
        id: 2,
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          type: 'Condo',
          bedrooms: 1,
          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
        }
      }, {
        type: 'rentals',
        id: 3,
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          type: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
        }
      }
    ];

  dealsRouter.get('/', function(req, res) {
    res.send({
      rentals
    });
  });


  dealsRouter.post('/', function(req, res) {
    res.status(201).end();
  });

  /*dealsRouter.get('/:id', function(req, res) {
    res.send({
      '':req.params
    });
  });*/

  dealsRouter.get('/:city', function(req, res) {
    let val = req.params.city.split("=");
    let filteredRentals = rentals.filter(function(i) {
      return i.attributes.city.toLowerCase().indexOf(val[1].toLowerCase()) !== -1;
    });

    if(filteredRentals.length>=1) {
      res.send({
        'data': filteredRentals
      });
    } else {
      res.send({
        'data': 'no records found'
      });
    }

    
  });

  dealsRouter.put('/:id', function(req, res) {
    res.send({
      'deals': {
        id: req.params.id
      }
  ...