Question

编辑：已解决，意外创建而不是扩展余烬视图。见下面的答案。

我正在为触摸屏设备创建一个键盘，在浏览器中没有原生触摸屏键盘（HP触摸屏上的谷歌浏览器，如果我错了，请纠正我。我愿意接受更简单的解决方案。）

我想将键盘分成不同的行，以便更轻松地使用样式。

keyboardView: Ember.CollectionView.create({
    elementId: 'search-keyboard',
    content: [
        [ 'q','w','e','r','t','y','u','i','o','p' ],
        [ 'a','s','d','f','g','h','j','k','l' ],
        [ 'z','x','c','v','b','n','m' ],
        [ ' ' ]
    ],
    itemViewClass: Ember.CollectionView.extend({
        tagName: 'ul',
        classNames: [ 'keyboard-row' ],
        itemViewClass: Ember.View.create({
            template: Ember.Handlebars.compile( '{{view.content}}' )
        })
    })
})

当然，我收到了这个错误：

Uncaught Error: assertion failed: itemViewClass must be a subclass of Ember.View, not <Ember.View:ember186>

我可以使用父视图作为ContainerView来实现解决方案，但这意味着为子集合视图复制classNames，tagNames等

有没有办法在没有代码重复的情况下创建这个键盘和键盘行？

Answer 1

哎呀，正在创建余烬视图而不是扩展...以下工作：

keyboardView: Ember.CollectionView.create({
    elementId: 'search-keyboard',
    content: [
        [ 'q','w','e','r','t','y','u','i','o','p' ],
        [ 'a','s','d','f','g','h','j','k','l' ],
        [ 'z','x','c','v','b','n','m' ],
        [ ' ' ]
    ],
    itemViewClass: Ember.CollectionView.extend({
        tagName: 'ul',
        classNames: [ 'keyboard-row' ],
        itemViewClass: Ember.View.extend({   // extend! don't create!
            template: Ember.Handlebars.compile( '{{view.content}}' )
        })
    })
})

使用带有嵌套CollectionViews的Ember JS创建键盘

1 个答案: