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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -