我在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中为子节点输出,然后正确滚动,但它根本不起作用。