Javascript Google Polymer 1.0-自动绑定模板值为空？_Javascript_Polymer_Web Component

Javascript Google Polymer 1.0-自动绑定模板值为空？

javascript polymer

Javascript Google Polymer 1.0-自动绑定模板值为空？,javascript,polymer,web-component,Javascript,Polymer,Web Component,我正在开发一个应用程序，它的灵感来自于，在Chrome中一切都很好，但是在Safari中，{{route}和{{user}}都是用空值标记到DOM中的我注意到，在香草聚合物初学者工具包中，Chrome和Safari中的自动绑定模板值都不是空的。如果您能提供帮助或深入了解发生了什么，以及为什么我的自动绑定模板值在Safari中为空，我们将不胜感激以下是到目前为止我得到的信息： routing.html： <script src="page/page.js"></script&

我正在开发一个应用程序，它的灵感来自于，在Chrome中一切都很好，但是在Safari中，

{{route}

和

{{user}}

都是用空值标记到DOM中的

我注意到，在香草聚合物初学者工具包中，Chrome和Safari中的自动绑定模板值都不是空的。如果您能提供帮助或深入了解发生了什么，以及为什么我的自动绑定模板值在Safari中为空，我们将不胜感激

以下是到目前为止我得到的信息：

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>

<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">

<!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>

index.html

：

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

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

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

<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">

<!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>


BYU MFA入学
BYU MFA入学
欢迎来到BYU MFA报名！让我们开始{{user}}！

谢谢

我尝试替换：

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

与：

瞧！我的数据绑定开始在Safari中工作！这对我来说很奇怪，因为如果我正确理解

webcomponents，lite

应该是

webcomponents

的轻量级版本

无论如何，如果有人有更深入的解释/答案，请将其发布，因为我真的不知道为什么这起作用，只是它起作用了，我更想知道为什么。否则我几天后就会接受这个答案