I'm having trouble getting consistent behavior from a conditional class binding in an Emblem template. The template is for a task list and the relevant snippet looks like this:
each task in content
tr.task class=task.completed:complete
td
a.completion{ action toggleTask task}
if task.completed
| ✔
else
span.larger ☐
So the idea here is that, if the task is complete, the whole table row should have a "complete" CSS class applied. And a little farther down, if the task is complete, it shows a check mark instead of an empty checkbox. (This all depends on evaluating task.completed, which is defined as a boolean property on the Task model.)
Everything works fine when you navigate to the relevant route (tasks.index) from elsewhere in the application. But when you load this route directly or reload the page, the class binding isn't evaluated, while the conditional branch a little lower down still works just fine.
I'm wondering if this is an issue with asynchronous model loading, the difference between entering a route via linkTo vs via page loading in Ember, or just weirdness in emblem/handlebars template evaluation? It seems like the problem is that, in the broken case, my class binding isn't being correctly re-evaluated after the model finishes loading.
For reference, my route definitions read as follows:
App.TasksRoute = Ember.Route.extend
setupController: (controller, model) ->
@controllerFor('application').set 'currentRoute', 'tasks'
@controller.set 'content', model
App.TasksIndexRoute = App.TasksRoute.extend
model: (params) ->
App.Task.find()
Has anyone else seen this issue?
