TypeError: Cannot read property 'alignTitle' of null - at IonHeaderBar.alignTitle (ionHeaderBar.js:3)

[ClarenceL]

Getting an odd error

TypeError: Cannot read property 'alignTitle' of null
    at IonHeaderBar.alignTitle (ionHeaderBar.js:3)
    at null.<anonymous> (ionNavBar.js:25)
    at blaze.js:3302
    at Function.Template._withTemplateInstanceFunc (blaze.js:3643)
    at fireCallbacks (blaze.js:3298)
    at null.<anonymous> (blaze.js:3391)
    at blaze.js:1752
    at Object.Blaze._withCurrentView (blaze.js:2183)
    at blaze.js:1751
    at Object.Tracker._runFlush (tracker.js:497)

It doesn't take long to see where it's breaking for me, but I have no idea how it gets to this state

Template.ionNavBar.data is null

I see that it's clearly set in ionNavBar.js to at least empty obj

Template.ionNavBar.created = function () {
  this.data = this.data || {};

However after rendering

Template.ionNavBar.rendered = function () {
  Session.set('hasHeader', true);

  IonHeaderBar.alignTitle.call(this);

A breakpoint before the call to alignTitle shows that this.data is null, how it got set to null between onCreated to onRendered is beyond me, might be my environment but this only started happening after moving to Meteor 1.2.1

I'm tempted to submit a null check, but I feel this is hiding the issue.

For now passing a dummy variable to ionNavBar works...

{{> ionNavBar name="myApp"}}

[Loschcode]

Well i'm interested in this too.

[JackAdams]

This was working fine for me in Meteor 1.2.1, then, after some seemingly minor and unrelated changes, that error started popping up in the browser console.

@ClarenceL thanks for the tip about passing a dummy variable to ionNavBar. That fixed it for me too, although, like you say, it feels like just masking the real issue.

[JoeyAndres]

For once, this.data is read-only and shouldn't be written on:

This property provides access to the data context at the top level of the template. It is updated each time the >template is re-rendered. Access is read-only and non-reactive.
It would makes sense that if no data context is given, then this would be a null.

I'll refactor and post a fix here (and push it on my local fork).

[aesmon]

Haven't experienced this issue and couldn't reproduce on [email protected]

@JoeyAndres Awesome repo, just checked it out.

[JoeyAndres]

@aesmon Got a notification. Thanks man. Really appreciate it.

[aesmon]

@JoeyAndres I know it may be an off-topic, but since it seems you are actively working with Ionic and Meteor mobile development, have you experienced disappearing items when showing/hiding the keyboard? I find it to be quite a problem that I keep experiencing over and over. The item is exactly there, but is not rendered anymore, when I focus the "invisible" input then it will show up again. It looks like Uiwebview limitation in regards to CSS, but I fail to see any consistent pattern with this happening. Seems like padding on elements will cause it most often. Is it a common issue? This is the first hybrid app I am developing.

[JoeyAndres]

@aesmon I have created meteoric mobile website that utilized the use of keyboard heavily, but have not come across this problem. We have yet to release it to android/apple appstore though, just mobile browser.

[aesmon]

@JoeyAndres Thanks for the input. It might have been the UiWebView limitation. I have given Meteor 1.3 beta a spin and WkWebView eliminated these rendering problems for me. Have you tried it yet?

[JoeyAndres]

@aesmon Nope. TBH, I'm only interested with the "better testing integration" or just testing in general. Which are external packages/modules like chimp.js, velocity, etc. Last time I checked, chimp.js have a primitive implementation of multi browser testing (hardcoded to 2). I'm just hoping that this can be truly variable next time.