Getting "undefined is not a function" when adding HTML element to a pane

#1

the problem was that i was registering vue components incorrectly but looking at your example i now know how to use them.
But now i have another problem. Adding an html element to a pane give me this error:

Uncaught TypeError: undefined is not a function

This is the stack trace:

At /opt/atom/resources/app.asar/node_modules/tabs/lib/tab-view.js:236

TypeError: undefined is not a function
  at tabs-tab.module.exports.TabView.updateTitle (/opt/atom/resources/app.asar/node_modules/tabs/lib/tab-view.js:236:27)
  at tabs-tab.module.exports.TabView.initialize (/opt/atom/resources/app.asar/node_modules/tabs/lib/tab-view.js:36:12)
  at TabBarView.module.exports.TabBarView.addTabForItem (/opt/atom/resources/app.asar/node_modules/tabs/lib/tab-bar-view.js:329:15)
  at /opt/atom/resources/app.asar/node_modules/tabs/lib/tab-bar-view.js:160:24
  at Emitter.module.exports.Emitter.emit (/opt/atom/resources/app.asar/node_modules/event-kit/lib/emitter.js:82:11)
  at Pane.module.exports.Pane.addItem (/opt/atom/resources/app.asar/src/pane.js:337:20)
  at Object.module.exports.VuePackage.toggle (/home/shakeel/vue-package/lib/vue-package.coffee:31:16)
  at atom-workspace.subscriptions.add.atom.commands.add.vue-package:toggle (/home/shakeel/vue-package/lib/vue-package.coffee:17:86)
  at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/opt/atom/resources/app.asar/src/command-registry.js:241:29)
  at /opt/atom/resources/app.asar/src/command-registry.js:3:61
  at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/opt/atom/resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:524:16)
  at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/opt/atom/resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:347:22)
  at HTMLDocument.module.exports.WindowEventHandler.onKeydown (/opt/atom/resources/app.asar/src/window-event-handler.js:177:20)
Framework for creating views
#2

I would need to see your code. Why don’t you post this at https://github.com/yyx990803/vue/issues? The support is good and I read every post.

#3

here the code of the view:

module.exports =
class VuePackageView
  constructor: (serializedState) ->
  
    @element = document.createElement('div')
    @element.classList.add('vue-package')

    @element.insertAdjacentHTML('afterbegin', '<my-component v-repeat="times"></my-component>');

    @vue = allowUnsafeNewFunction =>
        new Vue
          el: @element
          data:
            times : 3
          components:
            'my-component':
              template:'<p>A custom component!</p>'
  serialize: ->
  destroy: ->
    @element.remove()

  getElement: ->
    @element

then if i add @element to a modalpanel like so

@vuePackageView = new VuePackageView(state.vuePackageViewState)

atom.workspace.addModalPanel(item: @vuePackageView.getElement(), visible: true)

it works perfectly as expected.
But when adding to a pane

editor = atom.workspace.getActivePane()
bottomPane = editor.splitDown()
bottomPane.addItem(@vuePackageView.getElement())

give me that error.
Anyway i don’t think that the problem is due to Vue

#4

Your line endings were lost in the post but I think I can read it.

Maybe you should replace the Vue element with a simple element and see if you get the same error. To be honest I’m having trouble remembering how Pane::addItem works.

If that doesn’t help, it would be a pain, but I’d put breakpoints in the core tab-view code and work up the stack. I’ve found problems that way.

#5

This might be a good place to break and see what the element looks like.

#6

When adding an item in a Pane you should make sure that the item has a getTitle function for the TabView to use.

#7

I make it trough !
After some debugging i discovered that the problem was the item being added to the pane. the item must be an HTMLElement or a model with a view associated registered via ViewRegistry::addViewProvider. In my case the item was a model with a view but it wasn’t registered as view provider.
As pointed out by @abe the item must also implement the getTitle function.
Thanks to all :blush:

#8

Can we add to the Docs, or create some defined interface for Pane Items? Since it’s a requirement that they have a getTitle function.