1

Ember Datastore を使用してサーバーから取得した投稿のリストがあり、それをビューのようなサイドバー リストにレンダリングします。各投稿は、対応するルーターの状態を検索して有効な href を生成する {{action}} ヘルパーを使用して href を生成します. 投稿をクリックすると、コンテンツ アウトレットに読み込まれます。これはすべて完璧に機能します。

アイテムが選択されたとき、たとえば「is-active」など、アイテムをクリックしたとき、またはルーターの状態がhrefに一致する状態に遷移したときに、クラスをアイテムに追加したいと思います。戻るボタンを押すか、/posts/24 に直接移動すると、ID 24 の投稿が選択されます。

理想的には、これに対する解決策を実際の Post レコードから分離したいと思います。これは純粋にプレゼンテーションの問題であり、同じ原則を使用してメニュー項目を強調表示するためにこのアプローチも使用したいと考えています。

これを行う一般的に受け入れられている方法は何ですか？

編集：

App.Router: Ember.Router.extend(
  root: Ember.Route.extend(
    goToPostsIndex: Ember.State.transitionTo('posts.index')
    goToAbout: Ember.State.transitionTo('about')
    goToShowPost: Ember.State.transitionTo('posts.show')

    index: Ember.Route.extend(
      route: '/'
      redirectsTo: "posts.index"
    )

    posts: Ember.Route.extend(
      route: '/posts'

      index: Ember.Route.extend(
        route: '/'
        connectOutlets: ((router) ->
          router.get('applicationController').connectOutlet('posts', App.posts)
        )
      )

      show: Ember.Route.extend(
        route: '/posts/:post_id'

        connectOutlets: (router, post) ->
          router.get('postsController').connectOutlet('post', post)
     )
   )

     about: Ember.Route.extend(
       route: '/about'
       connectOutlets: (router) ->
         router.get('applicationController').connectOutlet('about')
     )

    )
  ) 
)

ここに私の現在のセットアップのフィドルがあります: http://jsfiddle.net/Pts7Q/31/

4

1 に答える 1

0

jsfiddle にサンプルコードを提供すると、質問に対するより正確で完全な回答が得られるでしょう。

そうは言っても、1 つの方法として、selectedPostController (または selectedPost 計算プロパティ) にバインドされる「isSelected」Post 属性を作成することが考えられます。クリックまたは URL からのルーター/状態の初期化で、selectedPostController の値を選択した項目に設定し、バインディングをトリガーして、現在の投稿では isSelected を true に、その他すべての投稿では false に更新できます。

次に、 http: //emberjs.com/documentation/#toc_binding-class-names-with-bindattr の ember ドキュメントに従って、

「クラス属性は他の属性と同じようにバインドできますが、いくつかの特別な動作も追加されています。デフォルトの動作は期待どおりに機能します。

ただし、バインド先の値がブール値の場合、そのプロパティのダッシュ化されたバージョンがクラスとして適用されます (ブール値が true の場合)。

 <div {{bindAttr class="isSelected"}}>
   Post title here
 </div>

これにより、次の HTML が生成されます (true の場合は追加され、false の場合はクラスは追加されません)。

 <div class="is-selected">
   Post title here
 </div>

次に、is-selected CSS クラスのスタイルを設定して、好みの外観にします。

于 2012-06-19T06:18:45.483 に答える