Use Polymer import instead of creating link tags manually

[skmvasu]

Polymer has an import module which will allow you to cleanly import polymer elements, rather than having to manually creating link tags.

Also, the current approach behaves erratically, especially in Firefox. For instance, in Firefox the values that I'm passing to the router url is not automatically bounded at the time the element is created. I'm assuming that this issue is caused due to the time delay while calling the importLoadedCallBack. This issue also fixed by using Polymer.import.

I've tested this scenario in both Firefox and Chrome. Please check and let me know incase you need something from me.

[erikringsmuth]

Hey @skmvasu, the router is vanilla Javascript and native DOM. It doesn't require Polymer at all. That's why I didn't use Polymer.import() in the first place. There are a number of ways to simplify the router if it was Polymer specific but right now you can use it natively in browsers that support web components.

Could you show some example code showing what problem you're having with values being bound to the router? We should treat that as an issue separately.

[skmvasu]

Hey,

Sorry about the late reply.

That makes sense. But since this being built for Polymer I would have prefered using Polymer API's instead of dabbling with JS. Guess it's a matter of personal preference :)

I was facing an issue while dynamically loading elements. Most of my initialization logic is present in the components ready method, but when the element is created the parameters passed to app-router is not available. This issue is erratic, and I'm not able to exactly pinpoint when it's happening.

For instance, here I'm passing the assessment id to the router,

 <app-route id="builder" path="/assessments/:assessment_id" import="/assets/builder.html" on-activate-route-end="{{assessmentInit}}" element="az-builder" on-before-data-binding="{{bindSession}}" bindRouter>
</app-route>

    //builder.html
ready: function(){
        this.assessment_id = this.assessment_id || ""
                     console.log(this.assessment_id)
                  //......
        }

Assessment id here is undefined. I'm guessing the the element is initialized before the values are getting passed. To fix this, I did a quick hack by creating a custom method in all my router components, and invoking it when the element is activated.

//in app-router.js
 function activeElement(router, element, url, eventDetail) {
    //......
    if(element){
        element.init()
    }
   //....
 }

and in my component,

 init: function(){
      // Values here are availab;e
      console.log(this.assessment_id)
  }

[erikringsmuth]

Yesterday there was a separate issue that ended up with the same problem you're seeing. Try switching from the ready() callback to the domReady() callback https://erikringsmuth.github.io/app-router/#/databinding/#callbacks.

The process of importing and creating an element looks something like this.

• import element
• el = document.createElement('element-name')
• data binding
• activeRoute.appendChild(el)

The ready() callback is usually called as soon as the element is created, but sometimes it's delayed. I think it's actually a Polymer bug that it's sometimes delayed and the variables are already bound.

Back to the first topic, the router is built for web components, not Polymer. I use a lot of Polymer examples since it's the most popular web components library, but that could change as more frameworks switch to using web components. Writing it in vanilla JS lets it work everywhere even when Polymer isn't used.

[skmvasu]

Thanks Eric. I tried working with domReady before this custom solution, but that was also erratic. It was consistently failing in Firefox 7/10 times.

So, far I only had luck with my custom implementation. I will raise an issue with the main polymer branch and see if they are able to propose a better solution for this.