Skip to main content

Add handlebar helpers in ember cli project

Updated for ember-cli 1.13.8

To add handlebar helper, create file under 'app/helpers/' directory

If your helper name is 'if-first' than your file will be like 'app/helpers/if-first.js'

Remember to use dash in helper name so that it will be loaded automatically, for more info read http://www.ember-cli.com/#resolving-handlebars-helpers .


Example:

Check for first element in each loop.

'app/helpers/if-first.js'

import Ember from "ember"
export default Ember.Helper.helper(function(options)  {
 if(options[0] === 0){
    return options[1];
  }else{
    return options[2];
  }
};    


then use it in your handlebars template

{{#each items as |item index|}} 
<div class={{if-first index "active item" "item"}}>
           </div>
{{/each}}  

You can also pass  parameter to helpers like:

 {{#format-date date}}

 and collect parameter:

 export default Ember.Helper.helper(function(date) {
    return moment(date[0]).fromNow();
});

  

Comments

Popular posts from this blog

Resolve OpenSSL::SSL::SSLError on Yosemite

If you are using rvm installed ruby on Yosemite  OSX  and getting error : OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed then reinstalling ruby with ` --disable-binary` may fix this Issue. rvm reinstall 2.1.2 --disable-binary  Reason: Ruby installed with packaged binary in rvm has OpenSSL path: /etc/openssl  Path of installed openssl is :  /usr/local/etc/openssl To check openssl directory: > irb > require 'openssl' > "SSL_CERT_DIR: %s" % OpenSSL::X509::DEFAULT_CERT_DIR

Software Engineering Vs Programming

When I was growing up,   Software Engineer and Programmer seems same term to me. Now after working a couple of years as a Software Engineer I think I can distinguish between the two terms.  Programming is a small part of Software Engineering.  Software Engineering include Understanding Requirement  Designing Software Organising code  Testing Software  Collaborating with other software engineers Writing good code is essential skill for being a Good software engineer but you can not neglect others skills as they are equally important for building good product. I read something similar in Software Engineering subject during my graduation, but none of the above make sense than. I think reading about software engineering is not the great way to learn about it instead build a lots of software and you will get a grasp of software engineering. What text books do not tell you about Software Engineering is : U...

Creating an ember cli component addon for javascript library

Create addon with generator command ember addon <addon-name> example: ember addon ember-cli-holderjs Add bower dependency  create blueprint to install dependency  ember g blueprint <addon-name> example: ember g blueprint ember-cli-holderjs Two files will be created installing blueprint   create blueprints/.jshintrc   create blueprints/ember-cli-holderjs/index.js Edit blueprints/<addon-name>/index.js Add afterInstall hook to add javascript library package to bower.json afterInstall: function(options) {     return this.addBowerPackageToProject('holderjs', '2.9.0');   } Generate component ember g component <addon-name> example: ember g component ember-cli-holderjs This will create following files installing component   create addon/components/ember-cli-holderjs.js   create addon/templates/components/ember-cli-holderjs.hbs installing ...