Re-render view when property changes - ember.js

Question

I have the following view to display a checked mark whenever the active property is set:
App.ActiveEntryView = Ember.View.extend({
render: function(buffer) {
var active = this.get('active'), icon;
if (active) {
icon = 'fa fa-check';
} else {
icon = '';
}
return buffer.push(icon);
}
});
But this is not re-rendering if I the active property changes. This is bound in my template like this:
{{#each model}}
<tr class="odd-even">
....
<td>{{view App.ActiveEntryView activeBinding="parked"}}</td>
....
</tr>
{{/each}}
Where parked is the property of the model that I want to evaluate. But whenever that property changes in the model, the view is not re-rendered. I have tried adding an observer:
App.ActiveEntryView = Ember.View.extend({
render: function(buffer) {
var active = this.get('active'), icon;
if (active) {
icon = 'fa fa-check';
} else {
icon = '';
}
return buffer.push(icon);
}.observes('active')
});
But then I get an error:
Uncaught TypeError: undefined is not a function
Referring to the line:
return buffer.push(icon);
I guess that the observer triggers the render function passing a different parameter than buffer.
How can I re-render the view then?

Answer 1

I don't know a ton about views, but from what I understand, this isn't the way to go about re-rendering. Specifically, render is a hook called by the system when it needs to render the template. Calling the hook yourself won't force the system to re-render the template, that has to be done at a higher level.
That being said, there's probably a way to force a re-render of the whole view, but that doesn't seem like a good solution for most issues. I see that you're doing something with icons, so I'm going to take a wild stab at a solution without knowing your entire problem. If you post more details, I can probably help you more.
From what I can tell, it seems like you're trying to change the icon of an element in the view when the active property changes. Here's how you might do that:
In your view template:
<i {{bind-attr class='view.active:fa view.active:fa-check'}}></i>
You can see more details about binding class names here.