Container & UI Components

components.containers.format-task.js

import Ember from 'ember';

export default Ember.Component.extend({
  animalEmojis: {
		monkey: '🐒',
    elephant: '🐘',
    giraffe: '🦒'
  },

  init() {
    this._super(...arguments);
    
    if (this.formatterName === 'add-animal-emoji') {
			this.addAnimalEmoji(this.data);
    }
  },
  
 	addAnimalEmoji(data) {
		this.set('formattedData', data.map(point => `${point} ${this.animalEmojis[point]}`));
  },
});

components.containers.load-animals.js

import Ember from 'ember';

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

components.containers.load-weather-daily.js

import Ember from 'ember';

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

components.containers.run-task.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    this[this.taskName]();
  },
  
  getAnimals() {
		this.set('data', ['giraffe', 'elephant', 'monkey']);
  },
             
  getWeatherDaily() {
		this.set('data', ['sunny', 'cloudy', 'rainy']);
  }
});

components.ui.list-bulleted.js

import Ember from 'ember';

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

components.ui.list-numbered.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

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

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('example');
});

export default Router;

routes.example.js

import Ember from 'ember';

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

routes.index.js

import Ember from 'ember';

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

templates.application.hbs

{{outlet}}

templates.components.containers.format-task.hbs

{{yield this.formattedData}}

templates.components.containers.load-animals.hbs

{{#containers/run-task 
	taskName='getAnimals'
as |data|}}

  {{#if @formatterName}}
    {{#containers/format-task
    	data=data
      formatterName=@formatterName
    as |formattedData|}}
    
      {{yield formattedData}}
    
    {{/containers/format-task}}
  {{else}}
  
    {{yield data}}
      
  {{/if}}

{{/containers/run-task}}

templates.components.containers.load-weather-daily.hbs

{{#containers/run-task 
	taskName='getWeatherDaily'
as |data|}}

  {{#if @formatterName}}
    {{#containers/format-task
    	data=data
      formatterName=@formatterName
    as |formattedData|}}
    
      {{yield formattedData}}
    
    {{/containers/format-task}}
  {{else}}
  
    {{yield data}}
      
  {{/if}}

{{/containers/run-task}}

templates.components.containers.run-task.hbs

{{yield this.data}}

templates.components.ui.list-bulleted.hbs

<ul>
	{{#each @listItems as |item|}}
		<li>{{item}}</li>
	{{/each}}
</ul>

templates.components.ui.list-numbered.hbs

<ol>
	{{#each @listItems as |item|}}
		<li>{{item}}</li>
	{{/each}}
</ol>

templates.example.hbs

{{!-- raw animals and bulleted list --}}

<h3>Use animals and bulleted list:</h3>

{{#containers/load-animals as |data|}}

	{{ui/list-bulleted listItems=data}}
  
{{/containers/load-animals}}

{{!-- formatted animals and bulleted list --}}

<h3>Use formatted animals and bulleted list:</h3>

{{#containers/load-animals 
	formatterName='add-animal-emoji'
as |formattedData|}}

	{{ui/list-bulleted listItems=formattedData}}
  
{{/containers/load-animals}}

{{!-- raw daily weather and bulleted list --}}

<h3>Use weather and bulleted list:</h3>

{{#containers/load-weather-daily as |data|}}

	{{ui/list-bulleted listItems=data}}
  
{{/containers/load-weather-daily}}

{{!-- raw daily weather and numbered list --}}

<h3>Use weather and numbered list:</h3>

{{#containers/load-weather-daily as |data|}}

	{{ui/list-numbered listItems=data}}
  
{{/containers/load-weather-daily}}

templates.index.hbs

{{#link-to 'example'}}Go To Example{{/link-to}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "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"
  }
}