Question

我正在开发一个受polymer starter kit启发的应用程序，一切都在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>

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的轻量级版本。

无论如何，如果有人有更深入的解释/答案，请发布，因为我真的不知道 为什么 这只是 它工作 ，我更喜欢知道为什么。否则我会在几天内接受这个答案。

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

1 个答案: