CODEWITHSUNDEEP
ember.jshandlebars.js
Miguel Fernández
Miguel Fernández

Reputation: 1

Binding class from an array in Ember.js

I'm starting with Ember.js and I'm feeling a bit lost. I have an object like this:

App.BRANDS = [
{
    brand:'Audi'
},{
    brand:'BMW'
},{
    brand:'Skoda'
}];

So what I'm trying is to display all the elements in that object with the {{#each}} component, show the text inside and bind the same text as a className. So I code this in the route:

App.InsuranceAutoSelectBrandRoute =  App.Route.extend({
  model: function(){
    return App.BRANDS;
  }
});

And this in the template:

<article>
  {{#each brand in model tagName='ul'}}
    <li class='item-space'>
      <span {{bind-attr class=':brand-auto classNameAuto'}}></span>
      {{brand.brand}}
    </li>
  {{/each}}
</article>

Then the issue is that the name of each brand, before I bind it as a class attr I have to lowercase it...

App.InsuranceAutoSelectBrandController = Ember.Controller.extend({
  classNameAuto: function() {
    App.BRANDS.forEach(function(item, index){
      return item.brand.toLowerCase();
    });
  }.property()
});

If in the same point where I'm returning the value I make a log, it works, but the class attr is not showing. What I'd like:

<article>
  <li class='item-space'>
    <span class='brand-auto audi'}}></span>
      Audi
  </li>
  <li class='item-space'>
    <span class='brand-auto bmw'}}></span>
    BMW
  </li>
  <li class='item-space'>
    <span class='brand-auto skoda'}}></span>
    Skoda
  </li>
</article>

Forgive me for my English level and thank you

Upvotes: 0

Views: 164

Answers (1)

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

First, as @Kitler said, bind-attr is deprecated. If you are using 1.13.x or higher, you may just insert class as any other variable, {{brand.brand}}.

Second, your code is incorrect and will not work. The easiest way to do what you want is via helper. You need to create a helper, lower-case and use it in this way:

<article>
  <ul>
    {{#each model as |brand|}}
      <li class='item-space'>
        <span class='brand-auto {{lower-case brand.brand}}'>{{brand.brand}}</span>         
      </li>
    {{/each}}
  </ul>
</article>

How to create a helper you may learn from documentation (http://guides.emberjs.com/v1.13.0/templates/writing-helpers/). If you use ember-cli, following code should work:

//app/helpers/lower-case.js
import Ember from 'ember';

export default Ember.Handlebars.makeBoundHelper(function (str) {
  return str.toLowerCase();
});

Upvotes: 1

Related Questions