Public Methods don't work in FF or IE

[erikringsmuth]

The document.querySelector('app-router').init() method can't be called in FireFox or IE.

Error:

document.querySelector('app-router').init is not a function

I'm not sure if public methods need to be set up differently or if this is a problem with the platform polyfill.

[petabyte]

Maybe you need to declare the function to available for every instance like this! I think you are getting a template instance when you to the query Selector. Yeah !

(function() {
  // Run once. Private and static to the element.
  var foo_ = new Foo();

  // Run for every instance of the element that's created.
  Polymer({
    get foo() { return foo_; }
  });
})();

[erikringsmuth]

No Polymer required, it's vanilla JS :wink:

Although this gave me idea.

AppRouter.attachedCallback = function() {
  // public API
  this.setAttribute('init', this.init);
  ...
}

It's weird looking but it makes polyfilled browsers able to call init(). That's everything except Chrome at this point. There's still another weird problem relating to unit tests. Right now I use a <script> tag. If I switch it to <link rel="import" href="/src/app-router.html"> it still can't call init(). I'm thinking this might be because <script> tags are sync and <link rel="import"> is async. More problems...

[petabyte]

I think you need to wait until polymer is ready before doing aquerySelector on the element. Otherwise the prototype of the appRouter object is still an HTML element rather than the prototype that you declare inside app-router.js

window.addEventListener('polymer-ready', function(e) { var appRouter = document.querySelector('app-router'); appRouter.init(); });

[erikringsmuth]

Or the native equivalent WebComponentsReady. I'll try this out tomorrow.

http://www.polymer-project.org/platform/html-imports.html#the-webcomponentsready-event

[petabyte]

It works! Debugging in Firefox

Stepping into the init function - Object u init function is invoked !

[erikringsmuth]

Winning! That was it!