Create a keyboard using Ember JS with nested CollectionViews

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?

score 1 · Accepted Answer · answered Jan 27 '13 at 18:05

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

Thanks! Yeah the error makes much more sense now, seeing as CollectionView IS a subclass of View when it is extended haha — ianstarz, Jan 27 '13 at 18:26

Create a keyboard using Ember JS with nested CollectionViews

1 Answers1