New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions:{
    sayHello: function(){
        alert('Hello')
    },
    toggleBody: function(){
        this.toggleProperty('isShowingBody');
    },
    submitAction: function(){
        alert(this.get('name'));
        alert(this.get('comment'));
    }
},

title: 'My Bliog Post',
body: 'My body of work is endless i tell you',
authors: ['william','robert','michelle'],
created: new Date(),
comments: [
    {
        name: 'Evan',
        comment: 'Hey what is new '
    },{
        name: 'Evan',
        comment: 'Hey ith you'
    },{
        name: 'Evan',
        comment: 'Hey what is n'
    }
]
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(){
        return ['Ford', 'tesla','lexus'];
    }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
 <h1>Cars</h1>
<ul>
    {{#each model as |car|}}
        <li>{{car}}</li>
    {{/each}}
</ul>

    <p>
    <strong>authors: </strong>
        {{#each authors as |author|}}
            {{author}},
        {{/each}}
</p>
    <p>
    <strong>authors with action on click: </strong>
        {{#each authors as |author|}}
            <span {{action "sayHello"}}><u>{{author}}</u></span>,
        {{/each}}
</p>
<h4>Comments</h4>
<ul>
    {{#each comments as |comment|}}
        <li><strong>{{comment.name}}</strong> - {{comment.comment}}</li>

    {{/each}}
</ul>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}