Search code examples
javascriptpolymerweb-component

Google Polymer 1.0 - Auto-binding template values empty?

I'm developing an application inspired by the polymer starter kit and everything works just fine in Chrome but in Safari {{route}} and {{user}} are stamped into the DOM with empty values.

I've noticed the auto-binding template values are NOT empty in both Chrome and Safari in the vanilla polymer starter kit. Any help or insight into what's happening and why my auto-binding template values are empty in Safari would be much appreciated.

Here's what I've got so far:

routing.html:

<script src="page/page.js"></script>

<script>
    window.addEventListener('WebComponentsReady', function() {
        page('/', function() {
            app.route = 'home';
            app.user = 'Alex';
        });

        // Initialize router.
        page();
     });
</script>

elements.html:

<link rel="import" href="iron-flex-layout/iron-flex-layout.html">
<!-- <link rel="import" href="iron-ajax/iron-ajax.html"> -->
<link rel="import" href="iron-pages/iron-pages.html">
<link rel="import" href="paper-material/paper-material.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html"> 
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-styles/paper-styles-classes.html">
<link rel="import" href="routing.html">
<link rel="import" href="app-theme.html">

index.html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="generator" content="BYU MFA Enrollment" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BYU MFA Enrollment</title>

    <link rel="stylesheet" href="main.css">
    <script src="webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="elements.html">
</head>

<body unresolved class="fullbleed layout vertical">
    <template is="dom-bind" id="app">
        <paper-header-panel mode="waterfall-tall">
            <paper-toolbar id="mainToolbar">
                <div class="middle paper-font-display2">BYU MFA Enrollment</div>
            </paper-toolbar>
            <iron-pages attr-for-selected="data-route" selected="{{route}}">
                <section data-route="home">
                    <paper-material elevation="1">
                    <h3>Welcome to BYU MFA Enrollment! Lets get going <span>{{user}}</span>!</h3>
                    </paper-material>
                </section>
            </iron-pages>
        </paper-header-panel>
    </template>
</body>

</html>

Thanks!

Solution

  • I tried replacing:

    <script src="webcomponentsjs/webcomponents.min.js"></script>

    with:

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

    Voila! My data bindings started working in Safari! Which is strange to me, because if I understand correctly webcomponents-lite is just supposed to be a lightweight version of webcomponents.

    Anyway, if anyone has a more in-depth explanation/answer, please post it as I really have no idea why this worked just that it worked, and I'd much prefer to know why as well. Otherwise I'll accept this answer in a few days.