angle-bracket-component-3.4

components.random-element.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.todo-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
  	removeItem: function(index){
    	this.removeThisItem(index);//closure damn action
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions:{
  	removeTheItem: function(index){
    	alert("You want remove item " + index + " ?");
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
  	let anObject = {};
    anObject.todoList = [{"title":"Item nonsense","desc":"One of them I guess","ofdate":"23 Feb 2019"}, 
                         {"title":"I dont know","desc":"Not sure what to put"}, 
                         {"title":"Questions","desc":"Okay you tell me now","ofdate":"17 Feb 2018"},
                        {"title":"America","desc":"Puritans in public, perverts in private"}];
    return anObject;
  }
});

templates.application.hbs

{{outlet}}

templates.components.random-element.hbs

{{yield}}
<h4>Date is: {{this.item.ofdate}}</h4>

templates.components.todo-item.hbs

<article class="todo-item">
  <h3>{{title}}</h3>
  <p>{{yield}}</p>
  <p>Edit item title: {{input type="text" value=title}}</p>
</article>
<button {{action "removeItem" index}}>Remove</button>

templates.index.hbs

<h6>Powered by Ember version 3.4</h6>
{{#each this.model.todoList as |item index|}}
	<TodoItem @title={{item.title}} @removeThisItem={{action "removeTheItem" index}}>
  	{{item.desc}}
  </TodoItem>
  {{#if item.ofdate}}
  	{{#let (component "randomElement") as |OneItem|}}
    	<OneItem @item={{item}} />
  	{{/let}}
  	{{!--{{component "randomElement" item=item}}--}}
   {{/if}}
  <hr>
{{/each}}

tests.helpers.destroy-app.js

import { run } from '@ember/runloop';

export default function destroyApp(application) {
  run(application, 'destroy');
}

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes.autoboot = true;
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';

let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));

start();

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}