jquery - ビューポートの外にあるときの Ember ListBox Scroll

Question

Ember で ListBox ビューとコントローラーを作成しました。

ビューポートの外にある要素に到達したら、1つ上または下に移動する必要があります(ulを正しくスクロールします)。

ListBox キーボード駆動が必要なだけです。

Ember.ListBoxController = Ember.ArrayController.extend
    contentDidLoad: ((e) ->
        @set("selectedId", 0)
    ).observes('content.isLoaded')
    updateSelected: ( -> 
        id = @get("selectedId")

        length = @get("content.length")

        if id >= 0 and id < length
            @set "selected", (@toArray())[id] 
    ).observes "selectedId"
    actions: 
        select: (id) ->
            length = @get "content.length"

            if id >= 0 and id < length
                @set "selectedId", id
            selectNext: ->
            @send "select", (@get "selectedId") + 1
        selectPrev: ->
            @send "select", (@get "selectedId") - 1

そして景色

Ember.ListBoxView = Ember.CollectionView.extend 
    tagName: "ul"
    contentBinding: "controller"
    classNames: ["list-box"]
    didInsertElement: ->
        @$().attr tabindex: 1
        @$().focus()
    keyDown: (e) ->
        e.preventDefault()
        if e.keyCode == 40
            @get("controller").send("selectNext")
        else if e.keyCode == 38
            @get("controller").send("selectPrev")

アイテムを表示（実際にはサブクラス化してテンプレートを渡しています）

Ember.ListBoxItemView = Ember.View.extend
    tagName: "li"
    isActive: (->
        return @get("content.id") == @get("controller.selected.id")
    ).property("controller.selected")
    classNameBindings: ["isActive:active"]

どうすればそれを達成できますか?

私は Ember.Evented を使用することを考えていました。コントローラーの選択アクションからトリガーを起動し、それをビューでキャッチし、jquery を使用してスクロールを行いますが、複雑すぎるようで、Ember の方法がはるかに優れていると思います。

また、ListBoxItemView 監視コントローラーで outOfViewPort 計算プロパティを選択し、子の親オブザーバー outOfViewPort で適切にスクロールしようとしましたが、まったく機能しませんでした。