クエリのパラメータに基づいてdivの色を変更します

Question

{{#link-to}}ヘルパーを使用してクエリパラメータを送信しようとしています。クエリパラメータを自分のルートに取得し、送信されたパラメータに基づいてdivの色を動的に変更します。私は正しいIDを取得しているが、ページ上で何も起こっていないように見える。ここで

は私のリンクは、誰もが私が間違っているつもり場所を確認することができ

<li>{{#link-to 'usernotification' (query-params highlightedNotification=activeUserNotification.id) 
          classNames="read-more"}}Read more{{/link-to}}</li> 

ヘルパー、ここで私のルートは

export default BaseRoute.extend({ 
    accountService: Ember.inject.service('account'), 
    userNotificationService: Ember.inject.service('usernotification'), 

    queryParams: { 
     highlightedNotification: { 
      refreshModel:true 
     } 
    }, 

    beforeModel(params){ 
     this._super(...arguments); 
     Ember.$("#"+params.queryParams.highlightedNotification).attr('style', 'background-color: black !important'); 
    }, 

}); 

あることですか？

Answer 1

beforeModelフックでは、経路はまだレンダリングされていません！したがって、変更しようとしているDOM要素はその場所にありません。

あなたは何らかの方法で動作させることができます。例えば、Ember.run.scheduleOnce('afterRender', this,()=>{/*your code*/});でコードをラップすることにより、afterRenderフェーズで動作するようにそのコードを実行するようにスケジューリングする。他にもいくつかの選択肢があります。

しかし、これはやり方ではありません。このデータを対応するコンポーネントに渡す必要があります。コンポーネントは、その表示方法を決定する必要があります。

また、名前「highlightedNotification」が間違っている可能性があります。 「selectedNotification」、「currentNotification」、「notificationToBeAttentioned」のようになります。注意をどのように強調するかをコンポーネントに決定させる。 "ハイライティング"は注意を喚起する一つの方法です。

サンプルtwiddleは、推奨される方法を説明します。