Getting a HandleBars

on Template Metaprogramming

(OR)

Customize how to show name

Data pulled from server

//routes/handlebars-fun.js
import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.store.findAll('person');
  }
});

{{!- templates/handlebars-fun.hbs }}
{{#each model as |person|}}
  Say hello to {{person.firstName}}
{{/each}}

{{!- templates/handlebars-fun.hbs }}
{{#each model as |person|}}
  Say hello to {{person.fullName}}
{{/each}}

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import Ember from 'ember';
// import { belongsTo, hasMany } from 'ember-data/relationships';

export default Model.extend({
  firstName: attr('string'),
  lastName: attr('string'),
  title: attr('string'),
  fullName: Ember.computed('firstName', 'lastName', function(){
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }),
  funHandlebarsController: Ember.inject.controller(),
  computedName: Ember.computed('funHandlebarsController.nameType', function(){
    return this.get(this.get('funHandlebarsController.nameType'));
  })
});

NOPE

{{#each model as |person|}}
  Say hello to {{person.computedName}}.
{{/each}}

import Ember from 'ember';

export default Ember.Controller.extend({
  nameTypes: ['firstName', 'lastName', 'fullName'],
  nameType: 'fullName',
  computedNames: Ember.computed('nameType', 'model.[]', function(){
    return this.get('model').map((person)=>{
      return person.get(this.get('nameType'));
    });
  })
});

{{#each computedNames as |name|}}
  Say hello to {{name}}.
{{/each}}

Gross

import Ember from 'ember';

export default Ember.Controller.extend({
  computedName: Ember.computed('nameType', 'person', function(){
    return this.get(`person.${this.get('nameType')}`);
  })
});

¯\_(ツ)_/¯

{{#each model as |person|}}
  {{say-hello person=person nameType=nameType}}.
{{/each}}

Say hello to {{computedName}}.

{{#each model as |person|}}
  Say hello to {{get person nameType}}.
{{/each}}

vs

import Ember from 'ember';

export default Ember.Controller.extend({
  nameTypes: ['firstName', 'lastName', 'fullName'],
  nameType: 'fullName',
  computedNames: Ember.computed('nameType', 'model.[]', function(){
    return this.get('model').map((person)=>{
      return person.get(this.get('nameType'));
    });
  })
});

{{#each computedNames as |name|}}
  Say hello to {{name}}.
{{/each}}

s

56!!

www.emberscreencasts.com