22 - Events

components.home-profile.js

import Ember from 'ember';

export default Ember.Component.extend({
	home: null,
  isPhotoVisible: false
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
  	return [
      { 
        title: 'Seafront family home in pristine nature',
        country: 'Iceland',
        photo: 'https://dax87tnsniies.cloudfront.net/images/listing/large-56dpopgpm.jpg'
      },
      {
      	title: 'Enjoy in a quiet natural area surrounded by sea and delicious food',
        country: 'Spain',
        photo: 'https://d11xw4p8b78xz0.cloudfront.net/images/p/1/a/5/2/600_396_dyn_p1a52au3a81c7n1o0b1fem16g51g2vg.jpg?m=1453766586'
      }
    ]
  }
});

templates.application.hbs

<h1>Homes</h1>

{{#each model as |home|}}
	{{home-profile home=home}}
{{/each}}

templates.components.home-profile.hbs

<h2>{{home.title}}</h2>
<p>Location: {{home.country}}</p>
<button>Show photo</button><br>
{{#if isPhotoVisible}}
	<img src="{{home.photo}}" height="150px"/>
{{/if}}

twiddle.json

{
  "version": "0.8.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.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}