2
我正在開發一個受polymer starter kit啓發的應用程序,在Chrome中一切正常,但在Safari中使用{{route}}
和{{user}}
標記爲空值。Google Polymer 1.0 - 自動綁定模板值爲空?
我注意到在香草樹聚合物入門套件中,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>
謝謝!