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

Question

我正在开发一个受 polymer starter kit 启发的应用程序，在 Chrome 中一切正常，但在 Safari 中 {{route}} 和 {{user}} 被标记到 DOM 为空值。

我注意到 Chrome 和 Safari 的 vanilla polymer 初学者工具包中的自动绑定模板值都不为空。非常感谢任何帮助或深入了解正在发生的事情以及为什么我的自动绑定模板值在 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>

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>

谢谢！

Answer 1

我尝试替换：

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

与：

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

瞧！我的数据绑定开始在 Safari 中工作了！这对我来说很奇怪，因为如果我理解正确的话 webcomponents-lite 应该只是 webcomponents 的轻量级版本。

无论如何，如果有人有更深入的explanation/answer，请post因为我真的不知道为什么 这只是 它有效 ，我也很想知道为什么。否则我会在几天后接受这个答案。

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

Google Polymer 1.0 - Auto-binding template values empty?

javascript

web-component

polymer