Getting a HandleBars

on Template Metaprogramming

Fun Handlebars Tricks

(OR)

By Jeffrey Biles

Customize how to show name

Data pulled from server

//models/person.js
import Model from 'ember-data/model';
import attr from 'ember-data/attr';

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')}`;
  })
});
//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}}

User Choice

Part 1: Selection

import Ember from 'ember';

export default Ember.Controller.extend({
  nameTypes: ['firstName', 'lastName', 'fullName'],
  nameType: 'fullName'
});
{{#x-select value=nameType}}
  {{#each nameTypes as |type|}}
    {{#x-option value=type}}{{type}}{{/x-option}}
  {{/each}}
{{/x-select}}

Part 2a: A Model Property?

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}}

Part 2b: computedNames?

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

Part 2c: A Component?

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}}.

More Handlebars

Part 2d: Handlebars

{{#each model as |person|}}
  Say hello to {{get person nameType}}.
{{/each}}
{{#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}}
  • get
  • concat
  • hash
  • mut
  • with

Cool Handlebars Helper

s

56!!

ember-composable-helpers

Use More Handlebars

Thank you

@jeffreybiles

www.emberscreencasts.com

@emberscreencast

Fun Handlebars Tricks

By Jeffrey Biles

Fun Handlebars Tricks

  • 996
Loading comments...

More from Jeffrey Biles