Ember ListBox在视图端口外滚动

时间:2013-11-05 01:33:44

标签: jquery ember.js listbox scroll

我在Ember中创建了一个ListBox视图和控制器。

当我到达视图端口之外的元素时,我需要向上或向下移动一个(正确滚动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并从控制器的select操作触发一个触发器,在视图中捕获它并使用jquery做一些滚动,但它看起来太复杂了,我认为会有更好的Ember方式。

我还尝试在ListBoxItemView观察控制器上选择outOfViewPort计算属性,并在子观察者outOfViewPort中为子节点输出,然后正确滚动,但它根本不起作用。

0 个答案:

没有答案