filter component

1. All urls to 1 route {
  this.route('about', {path: '/'});
  this.route('about', { path: '/*wildcard' });

2. Dom Manipulation

// in any controller
Ember.$('#component-x').val('My Value');

3. Adapter: rental.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  'namespace': 'api'

4. Template: index.hbs

<div class="jumbo">
  <div class="right tomster"></div>
    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.

{{input value=filterText type='text' placeholder='Search City'}}
  {{#unless filteredResults.length}}
    <h4>no record matched your criteria</h4>

    {{#each filteredResults as |item|}}
      <li>{{}} {{}}</li>

5. Route: index.js

import Ember from 'ember';

export default Ember.Route.extend({
  filterText: '',

  setupController(controller, model) {
    this._super(controller, model);
    controller.set('filterText', this.get('filterText'));

  queryParams: {
    search: {
      refreshModel: true

  beforeModel: function(transition) {
    // console.log('before model: ';

  model: function(params) {
    var endPoint = 'http://localhost:4200/api/deals';
    var results = [];

    endPoint = ( endPoint+'/city=' : endPoint;

      url: endPoint,
      type: 'GET',
      accepts: 'application/json',
      success: function(data) {
        if( {
        } else if( === 'no records found'){
          console.log('No results found');
        } else {
      error: function() {
          console.log('DEBUG: GET Deals Failed');
    return results;

6. Controller: index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['search'],

  onFilterTextChange: function() {, this.applyFilter, 0);

  applyFilter: function() {
    this.set('search', this.get('filterText'));
    console.log('search set: ' + this.get('search'));
  filteredResults: function() {
    return this.get('model');

7. Mock Response(http-mock): rentals.js

/*jshint node:true*/
module.exports = function(app) {
  var express = require('express');
  var rentalsRouter = express.Router();
  var rentals = [
        type: 'rentals',
        id: 1,
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          type: 'Estate',
          bedrooms: 15,
          image: ''
      }, {
        type: 'rentals',
        id: 2,
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          type: 'Condo',
          bedrooms: 1,
          image: ''
      }, {
        type: 'rentals',
        id: 3,
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          type: 'Apartment',
          bedrooms: 3,
          image: ''

  rentalsRouter.get('/', function(req, res) {
  });'/', function(req, res) {

  /*rentalsRouter.get('/:id', function(req, res) {

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

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


  rentalsRouter.put('/:id', function(req, res) {
      'rentals': {

  rentalsRouter.delete('/:id', function(req, res) {

  // The POST and PUT call will not contain a request body
  // because the body-parser is not included by default.
  // To use req.body, run:

  //    npm install --save-dev body-parser

  // After installing, you need to `use` the body-parser for
  // this mock uncommenting the following line:
  //app.use('/api/rentals', require('body-parser').json());
  app.use('/api/rentals', rentalsRouter);

Interactive Pages


It’s been a long time desire of mine to develop an interactive web page with draggable content. But only in the recent times I could get hold of it. So today on my leisure, I developed a simple page to exploit it. Should say very simple at that because they say simple things should be made simple.

So I don’t think its worth writing on it. But trust me, it really worth a visit to it. A link to the page is given below. So one can follow it up to check it out.

Go Interactive

Somehow I think I have managed to do something for children. Well I actually wanted to do it that way! Anyway, should note that it was only checked on firefox. Feel free to drop in your comments, Have a good day.

Looking for Icons…

If you are a person who fancy collecting icons or in need of some icons, I strongly suggest you to check out this truly amazing site by name it is Iconfinder. Iconfinder has thousands and tons of icons for you, importantly when I checked it was fairly quick to deliver it’s goods. Another innovation to Iconfinder was it’s AJAX auto suggest dropdown menu which intelligently pops out according to your search criteria, which I feel is another fine integration to Iconfinder. Another fine tune to Iconfinder is their wonderfull search cloud.

Finally I must say a few words about it’s breathtaking interface which makes it even more fascinating, to start with it has a traditional white bacground and at the center is it’s search box which looks more like a MAC OSX widget. But once you search it undergoes a complete transformation and now the the search bar goes on top in a blackish environment and below goes the search results.

You can visit Iconfinder on,

It also provides you a nice collection of PNG gel icons which I fancy collecting a few. I actually came to know about this site thanks to my good friend Nuwan (co-founder of Archmage Software and a great Pro I have ever seen.) who is currently living in Germany.