Binding class attribute with SC2-handlebars

bind_class_helper.js

SC.Handlebars.registerHelper('bindClass', function(options) {

  var attrs = options.hash;

  var view = options.data.view;
  var ret = [];

  var dataId = ++jQuery.uuid;


  var classBindings = attrs['bind'];
  if (classBindings !== null && classBindings !== undefined) {
    var classResults = SC.Handlebars.bindClasses(this, classBindings, view, dataId);
     
    var class = attrs['class'];

    var item = 'class="';
    if (class !== null && class !== undefined && class.length > 0) {
      var classes = [];
      if (  typeof class === 'string' ) {
        classes.push( class );
      } else {
        classes = class;
      }
      item+=classes.join(' ')+' ';
    }

  
    item+=classResults.join(' ')+'"';

    ret.push(item);
  }else{

    sc_assert("You must specify bind attribute to bindClass", false);

  }

  ret.push('data-handlebars-id="' + dataId + '"');
  return new SC.Handlebars.SafeString(ret.join(' '));

});

using_bind_attr.js

    TabItem = SC.Object.extend({
      name: null,
      selected: false,

      nameClass: function(){
        var result = 'name';
        if ( get(this, 'selected') ) {
          result+= ' selected';
        }
        return result;
      }.property('selected').cacheable(),

      imgClass: function(){
        var result = 'img';
        if ( get(this, 'selected') ) {
          result+= ' selected';
        }

        return result;
      }.property('selected').cacheable()

    });

    var items = []; 
    // fill items
    items.pushObject( TabItem.create({name: 'value'}) );

    

    footerView = SC.View.create({
        tagName: 'nav', 
        elementId: 'footer',
        content: items, 
        template: SC.Handlebars.compile('<ul>{{#each content}}<li><div {{bindAttr class="nameClass"}}>{{name}}</div><div {{bindAttr class="imgClass"}}>{{name}}</div></li>{{/each}}</ul>')
    });

using_bind_class_handlebars_helper.js

    TabItem = SC.Object.extend({
      name: null,
      selected: false
    });

   var items = []; 
    // fill items
    items.pushObject( TabItem.create({name: 'value'}) );
    

    footerView = SC.View.create({
        tagName: 'nav', 
        elementId: 'footer',
        content: items, 
        template: SC.Handlebars.compile('<ul>{{#each content}}<li><div {{bindClass class="name" bind="selected" }}>{{name}}</div><div {{bindClass class="img" bind="selected"}}>{{name}}</div></li>{{/each}}</ul>')
    });