1

我在 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 并从控制器的选择操作触发触发器，在视图中捕获它并使用 jquery 进行一些滚动，但它似乎太复杂了，我认为会有更好的 Ember 方式。

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

4

0 回答 0