Question

I had a single view with an each helper similar to this:

<table class="select-sect" cellspacing="0">
{{#each sections}}
<tr {{bindAttr class="highlight:highlight"}} {{action "selectSection" }}>
  <td class="key">
    {{#each zones}}
      <em {{bindAttr style="color"}}>&nbsp;</em>
    {{/each}}
  </td>
  <td class="sect">{{name}}</td>
  <td class="price">{{currency lowPrice}} - {{currency highPrice}}</td>
</tr>
{{/each}}
</table>

Binding a dynamic class like this worked very well. If I set section.highlight == true in a controller, the view would update with the appropriate class.

“Calling” code:

zone.section.set('highlight', true);

Because I need to handle some other events on each row, I’ve migrated the entire table row to a nested view. I’m searching for a way to make the dynamic class work as it used to.

{{#each sections}}
{{#view SYOS.SelectSectionRowView sectionBinding="this" }}
  <td class="key">
    {{#each section.zones}}
      <em {{bindAttr style="color"}}>&nbsp;</em>
    {{/each}}
  </td>
  <td class="sect">{{section.name}}</td>
  <td class="price">{{currency section.lowPrice}} - {{currency section.highPrice}}</td>
{{/view}}
{{/each}}

I don’t think I can use the same bindAttr solution since it would need to apply to the #view helper. I’ve also tried classNameBindings & classBinding to no avail. Updating section.highlight no longer triggers this view to apply the dynamic class.

View w/ classNameBindings:

SYOS.SelectSectionRowView = Em.View.extend({

tagName: 'tr',

classNameBindings: ['isHighlighted:highlight'],

isHighlighted: function () {
    return this.section.highlight;
} //also tried .property('section')
});

View with classBinding:

{{#view SYOS.SelectSectionRowView sectionBinding="this" classBinding="needsHighlight"}}

in view class:

needsHighlight: function () {
  if (this.section.highlight) {
return 'highlight';
  }

return '';
} .property('section'),

Neither of these seems to do the trick. Can anyone lend any insight into how to get a scenario like this going?

Thanks much!

Answer 1

try classNameBindings: [‘section.highlight:highlight’]