javascript - Google Polymer 1.0 - Auto-binding template values empty? -
i'm developing application inspired polymer starter kit , works fine in chrome in safari {{route}}
, {{user}}
stamped dom empty values.
i've noticed auto-binding template values not empty in both chrome , safari in vanilla polymer starter kit. or insight what's happening , why auto-binding template values empty in safari appreciated.
here's i've got 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 byu mfa enrollment! lets going <span>{{user}}</span>!</h3> </paper-material> </section> </iron-pages> </paper-header-panel> </template> </body> </html>
thanks!
i tried replacing:
<script src="webcomponentsjs/webcomponents.min.js"></script>
with:
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
voila! data bindings started working in safari! strange me, because if understand correctly webcomponents-lite
supposed lightweight version of webcomponents
.
anyway, if has more in-depth explanation/answer, please post have no idea why worked it worked, , i'd prefer know why well. otherwise i'll accept answer in few days.
Comments
Post a Comment