CODEWITHSUNDEEP
javascriptember.js
Ian
Ian

Reputation: 1

Ember computed property for hiding element

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?

Upvotes: 0

Views: 210

Answers (1)

Ian
Ian

Reputation: 1

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.

Upvotes: 0

Related Questions