Attributes undefined in custom element ready function

[markibanez]

Hi @erikringsmuth

Here's my app-router markup

<app-router mode="hash" init="manual">
    <app-route path="/forms" import="/pages/forms-page.html" bindRouter></app-route>
    <app-route path="/form-view/:fid" import="/pages/form-view-page.html"></app-route>
    <app-route path="*" redirect="/forms"></app-route>
</app-router>

So the problem is when I change the route imperatively, like so

this.router.go('/form-view/' + this.formObject.FormID);

When I access the path variable via {{fid}} in the template, the value is retrieved just fine. But when I try and access it in the custom element's ready function, it gives me undefined. Below is my custom element.

<polymer-element name="form-view-page" attributes="fid">
    <template is="autobinding">
        <style>
            div.main {
                padding: 10px;
            }
        </style>
        <core-ajax id="GetFormViewAjax" handleAs="json" on-core-response="{{getFormViewData}}"></core-ajax>        
        <div class="main" layout vertical>
            <template repeat="{{field in formFields}}">
                <span>{{fid}}</span> <!-- This works fine -->
                <form-field formFieldObject={{field}}></form-field>
            </template>
        </div>
    </template>    
    <script>
        Polymer({
            ready: function () {                
                console.log(this.fid); //undefined
                this.$.GetFormViewAjax.url = localStorage.getItem('api-base-url') + 'Forms/GetFormViewData/1';
                this.$.GetFormViewAjax.go();
            },
            getFormViewData: function (e) {
                for (var i = 0; i < e.detail.response.FormFields.length; i++) {
                    var field = e.detail.response.FormFields[i];

                    for (var j = 0; j < e.detail.response.TemplateFields.length; j++) {
                        var fieldInfo = e.detail.response.TemplateFields[j];
                        if (field.TemplateFieldID == fieldInfo.TemplateFieldID) {
                            field.TemplateField = fieldInfo;
                            break;
                        }
                    }
                }               

                this.formFields = e.detail.response.FormFields; 
            }
        });
    </script>
</polymer-element>

I'm hoping there's a way to access the path variables in the custom element's script.

Great project by the way, really easy to use. Thanks in advance.

[erikringsmuth]

Yeah, this explains it https://erikringsmuth.github.io/app-router/#/databinding/#callbacks. The problem is there's no way to do the data binding early enough so you can use it in the ready() callback.

[markibanez]

Thanks for pointing me in the right direction :)