Question

EDIT: SOLVED, was accidentally creating instead of extending the ember view. See answer below.

I am creating a keyboard for a touchscreen device that does not have a native touchscreen keyboard in the browser (Google Chrome on an HP touchscreen, though correct me if I’m wrong. I’m open to an easier solution.)

I’d like to split out the keyboard into separate rows to make the styling easier.

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}}' )
        })
    })
})

Of course, I am getting this error:

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

I can work a solution with the parent view as a ContainerView, but it means duplicating classNames, tagNames, etc for the child collectionViews

Is there a way to create this keyboard and keyboard rows without said code duplication?

Answer 1

Whoops, was creating the ember view instead of extending…the following works:

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}}' )
        })
    })
})