Ember computed property for hiding element

Question

I'm trying to get an element in ember to be hidden (set class with display: hidden;) depending on the presence of a certain element in a controller property. I also have two other computed properties in the view, one is rowNumber and the other columnNumber. Those two properties work as expected but when I add code into the hiddenClass computed property, the code breaks and claims that "Something you did caused a view to re-render after it was rendered but before the element was added into DOM".

The code for the computed property is:

hiddenClass: function() {
        var cells = this.get('controller.occupiedCells');
        console.log('onOccupiedChange fired');
        var r = cells.filterBy('row',parseInt(this.get('rowNumber'))).findProperty('col',parseInt(this.get('columnNumber')));
    }.property('controller.occupiedCells.@each')

I am aware that this doesn't return true/false as expected, nonetheless no exception is thrown if I remove the line declaring var r. How do I get the element to be hidden when a condition that depends on rowNumber and columnNumber is met?

<tr id="row-3"> <th>8:30 am</th> {{#each a in model.arr}} {{view "droppable-cell"}} {{/each}} <td class="expand"></td> </tr> Is the one that refers to the view, the views template is: {{#if view.objectExample}} {{draggable-object-example objectExample=view.objectExample isPlaced=true}} {{/if}} — Ian
It shouldn't matter though because the templates all render perfectly until the line where r is declared and initialized is added. — Ian

Ian Ian · Accepted Answer · 2014-10-12T21:57:09

The issue turned out to be that the line:

var r = cells.filterBy('row',parseInt(this.get('rowNumber'))).findProperty('col',parseInt(this.get('columnNumber')));

was using get on computed properties which had jQuery code in them, since jQuery code should not be run before the element has been inserted into the DOM I was getting the error about re-rendering. I was able to fix the issue by overriding the didInsertElement method to postpone any evaluation of jQuery until after the element had been appended to the DOM.

Ember computed property for hiding element

1 Answers