Tutorial

components.filter-listing.js

import Ember from 'ember';

export default Ember.Component.extend({
  filter: null,
  filteredList: null,
  actions: {
    autoComplete() {
      this.get('autoComplete')(this.get('filter'));
    },
    search() {
      this.get('search')(this.get('filter'));
    },
    choose(city) {
      this.set('filter', city);
    }
  }
});

components.rental-listing.js

import Ember from 'ember';

export default Ember.Component.extend({
  isImageShowing: false,
  actions: {
    imageShow() {
      this.set('isImageShowing', true);
    },
    imageHide() {
      this.set('isImageShowing', false);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
   model: function () {
    return rentals;
  }
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  filteredList: null,
  listings: function () {
    return this.get('model');
  }.property(),
  actions: {
    autoComplete(param) {
      if(param !== "") {
        var model = this.get('model');
        model = model.filter(function (el) {
          return el.city.toLowerCase().indexOf(param.toLowerCase()) !== -1;
        });
        this.set('filteredList', model);
      } else {
        this.set('filteredList').clear();
      }
    },
    search(param) {
      if(param !== "") {
        var listings = this.get('model');
        listings = listings.filter(function (el) {
          return el.city.toLowerCase() === param.toLowerCase();
        });
        this.set('listings', listings);
      } else {
        this.set('listings', this.get('model'));
      }
    }
  }
});

initializers.multivariate.js

export function initialize(application) {
  application.inject('route', 'mts', 'service:multivariate-testing-service');
  application.inject('component', 'mts', 'service:multivariate-testing-service');
  application.inject('controller', 'mts', 'service:multivariate-testing-service');
};

export default {
  name: 'multivariate-testing-service',
  initialize: initialize
};

routes.index.js

import Ember from 'ember';

var rentals = [{
  id: 1,
  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'
}, {
  id: 2,
  title: 'Urban Living',
  owner: 'Mike TV',
  city: 'Seattle',
  type: 'Condo',
  bedrooms: 1,
  image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
}, {
  id: 3,
  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'
}];

export default Ember.Route.extend({
  model() {
    return rentals;
  }
});

services.multivariate-testing-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  testMe: function() {
        console.log("this is james!");
    }
});

templates.application.hbs

{{outlet}}

templates.components.filter-listing.hbs

City: {{input value=filter key-up=(action 'autoComplete' filter)}} 
<button {{action 'search'}}>Search</button>

<ul>
{{#each filteredList as |item|}}
  <li {{action 'choose' item.city}}>{{item.city}}</li>
{{/each}}
</ul>

templates.components.rental-listing.hbs

<h2>{{rental.title}}</h2>
<p>Owner: {{rental.owner}}</p>
<p>Type: {{rental.type}}</p>
<p>Location: {{rental.city}}</p>
<p>Number of bedrooms: {{rental.bedrooms}}</p>
{{#if isImageShowing}}
  <p><img src={{rental.image}} alt={{rental.type}} width="500"></p>
  <button {{action "imageHide"}}>Hide image</button>
{{else}}
  <button {{action "imageShow"}}>Show image</button>
{{/if}}

templates.index.hbs

<h1>Welcome to Super Rentals</h1>

We hope you find exactly what you're looking for in a place to stay.
<br /><br />
{{filter-listing filteredList=filteredList 
autoComplete=(action 'autoComplete') search=(action 'search')}}

{{#each listings as |rentalUnit|}}
  {{rental-listing rental=rentalUnit}}
{{/each}}

twiddle.json

{
  "version": "0.7.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.4.3",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "2.4.3"
  }
}