Emblem テンプレートの条件付きクラス バインディングから一貫した動作を得ることができません。テンプレートはタスク リスト用で、関連するスニペットは次のようになります。
each task in content
tr.task class=task.completed:complete
td
a.completion{ action toggleTask task}
if task.completed
| ✔
else
span.larger ☐
したがって、ここでの考え方は、タスクが完了した場合、表の行全体に「完全な」CSS クラスが適用されている必要があるということです。少し下に、タスクが完了すると、空のチェックボックスの代わりにチェック マークが表示されます。(これはすべて、 Task モデルのブール値プロパティとして定義されている task.completed の評価に依存します。)
アプリケーションの他の場所から関連するルート (tasks.index) に移動すると、すべてが正常に機能します。しかし、このルートを直接ロードしたり、ページをリロードしたりすると、クラス バインディングは評価されませんが、少し下の条件分岐は問題なく機能します。
これはモデルの非同期読み込みの問題なのか、Ember での linkTo 経由とページ読み込み経由のルート入力の違いなのか、それともエンブレム/ハンドルバー テンプレートの評価の奇妙さなのか、疑問に思っています。問題は、壊れたケースでは、モデルの読み込みが完了した後にクラス バインディングが正しく再評価されていないことです。
参考までに、私のルート定義は次のようになっています。
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()
他の誰かがこの問題を見たことがありますか?