Question

I have a controller that is created by the Ember.Router, and this populates a table.

The template:

{{#each key in controller}}

  {{#view App.TestView contentBinding="key"}}

  <tr {{bindAttr class="view.isSelected"}} {{action selectKey this on="click" target="view" }}>
    <td>{{key.id}}</td>
    <td><button type="button" class="btn btn-danger" {{action removeKey on="click" target="view"}}>Remove</button></td>
  </tr>

  {{/view}}

{{/each}}

The code behind:

App.TestView = Em.View.extend({
  removeKey: function () {
    var key = this.get('content');
    this.bindingContext.removeObject(key);
    return false;
  },
  selectKey: function (event) {
    this.set('theClass', 'warning');
  },
  theClass: 'selectable',
  isSelected: function () {
    return this.get('theClass');
  }.property('theClass')
});

I’m expecting the onclick event to change the class to ‘warning’, and for the row in the collection to be highlighted in yellow (as per a css class), however this does not happen. The isSelected property doesn’t seem to update the DOM, and I can’t see why it doesn’t do that.

Jsfiddle here: http://jsfiddle.net/EsF4R/114/

Answer 1

I think there is clash between Metamorph and the table structure. Giving the tag <tr> to the view and putting the class binding on the <td> element seems to make it work, even if I think the resulting html is still weird (in particular the <script x-start> and <script x-end>)

see your modified fiddle here: http://jsfiddle.net/Sly7/EsF4R/126/

EDIT

Here is a fiddle with good-looking matching tags. http://jsfiddle.net/Sly7/EsF4R/129/
Moreover it sticks more to the behavior you want, ie handling class binding and click on the tr element instead of the td