Why is my data binding not working on Firefox and IE11 in Polymer
I have a very strange problem, it happens in firefox (I am using firefox37) and IE11, but it was ok on chrome, the problem is that even if the request core-ajax
was answered and data was received (I can see it from devtools), the data was linked automatically on chrome, but firefox and IE didn't, and then when you click on the screen or some event triggered (for example, press the F12 button) it displays the data, I don't know why this happened? Has anyone met before?
on chrome:
in firefox:
before clicking on the screen:
after clicking on the screen:
in IE11:
before click screen:
after screen click:
in firefox and IE11, before click and after click nothing has changed, new request has not changed, but this is a problem, it is not automatically data bound.
<strong> codes:
home-page.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/layouts/main-layout.html">
<link rel="import" href="/bower_components/core-animated-pages/core-animated-pages.html" >
<link rel="import" href="/bower_components/paper-fab/paper-fab.html" >
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="/bower_components/core-icon/core-icon.html" >
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-media-query/core-media-query.html">
<!-- <link rel="import" href="/elements/single-element.html" > -->
<polymer-element name="home-page">
<!-- <paper-toast id="toast" text="service is not opened"></paper-toast> -->
<template>
<main-layout toast={{$.toast}}>
<style>
.chip-container {
clear:left;
position: relative;
text-align:center;
margin:120px auto;
}
.chip {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.chip-top {
width: 250px;
height: 200px;
}
.chip-bottom {
padding: 8px;
line-height: 1.5;
}
.chip-album-title {
font-weight: bold;
}
paper-icon-button::shadow core-icon {
width: 20px;
height: 20px;
}
</style>
<core-ajax auto method="GET" headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}' url="{{navurl}}" handleAs="json" response="{{articlecategories}}"></core-ajax>
<core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
<!-- small -->
<section>
<div id="chipcontainer" layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}" center class="chip-container" hero-p on-tap="{{transition}}">
<div flex three></div>
<template repeat="{{articlecategories as articlecategory}}">
<div flex four class="chip" hero-id="{{articlecategory.id}}-{{articlecategory.name}}" hero?="{{selectedAlbum === articlecategory }}">
<div class="chip-top" style="background:{{articlecategory.covercolor}};" hero-id="{{articlecategory.id}}-{{articlecategory.name}}-cate" hero?="{{selectedAlbum === articlecategory}}"></div>
<div class="chip-bottom" layout horizontal end-justified >
<div class="chip-album-title" flex three>
<div flex style="color:{{articlecategory.covercolor}}">{{articlecategory.name}}</div>
<div horizontal layout end>
<div flex style="color:{{articlecategory.covercolor}}"> {{articlecategory.totalitems}}</div>
</div>
</div>
<div flex>
<a style="color:{{articlecategory.covercolor}}" href="/article/{{articlecategory.name}}"><paper-icon-button icon="arrow-forward" title="arrow-forward"></paper-icon-button></a>
</div>
</div>
</div>
</template>
<div flex three></div>
</div>
</section>
<!-- big -->
<template if={{!phoneScreen}}>
<section id="details" style="padding: 50px 10% 0;">
<div class="card" layout horizontal style="height: 400px;border-radius: 3px;text-align: start;overflow: hidden;background: #fff;box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);" hero-id="{{selectedAlbum.id}}-{{selectedAlbum.name}}" hero on-tap="{{transition}}">
<div class="card-left" style="width: 400px;text-align:center;background:{{selectedAlbum.covercolor}};" hero-id="{{selectedAlbum.id}}-{{selectedAlbum.name}}-cate" hero>
<a href="/article/{{selectedAlbum.name}}"><paper-fab class="go-url" style="margin-left:370px;margin-top:165px;background: {{selectedAlbum.covercolor}};" icon="arrow-forward" title="{{selectedAlbum.name}}"></paper-fab></a>
</div>
<div class="card-right" style="padding:24px;" flex>
<div layout horizontal end-justified>
<div>
<div class="card-icon" style="border-radius: 50%;width: 60px;height: 60px;margin-right: 16px;background:{{selectedAlbum.covercolor}};"></div>
</div>
<div flex>
<div class="card-album-title" style="font-size: 2em;">{{selectedAlbum.name}}</div>
<div class="card-album-artist">{{selectedAlbum.totalitems}}</div>
</div>
</div>
<div flex>
<div class="card-album-description" style="font-size:200;margin:50px;">{{selectedAlbum.description}}</div>
</div>
</div>
</div>
</section>
</template>
<template if={{phoneScreen}}>
<section id="details" style="padding: 20px ;">
<div class="card" layout vertical style="height: 400px;border-radius: 3px;text-align: start;overflow: hidden;background: #fff;box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);" hero-id="{{selectedAlbum.id}}-{{selectedAlbum.name}}" hero on-tap="{{transition}}">
<div class="card-left" style="width: 400px;text-align:center;background:{{selectedAlbum.covercolor}};" hero-id="{{selectedAlbum.id}}-{{selectedAlbum.name}}-cate" hero>
<a href="/article/{{selectedAlbum.name}}"><paper-fab class="go-url" style="margin-left:150px;margin-top:80px;background: {{selectedAlbum.covercolor}};" icon="arrow-forward" title="{{selectedAlbum.name}}"></paper-fab></a>
</div>
<div class="card-right" style="padding:24px;" flex>
<div layout horizontal end-justified>
<div>
<div class="card-icon" style="border-radius: 50%;width: 60px;height: 60px;margin-right: 16px;background:{{selectedAlbum.covercolor}};"></div>
</div>
<div flex>
<div class="card-album-title" style="font-size: 2em;">{{selectedAlbum.name}}</div>
<div class="card-album-artist">{{selectedAlbum.totalitems}}</div>
</div>
</div>
<div flex>
<div class="card-album-description" style="font-size:200;margin:50px;">{{selectedAlbum.description}}</div>
</div>
</div>
</div>
</section>
</template>
</core-animated-pages>
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
</main-layout>
</template>
<script>
(function(){
Polymer('home-page', {
page: 0,
selectedAlbum: null,
domready:function(){
},
transition: function(e) {
if (this.page === 0 && e.target.templateInstance.model.articlecategory) {
this.selectedAlbum = e.target.templateInstance.model.articlecategory;
this.page = 1;
} else {
this.page = 0;
}
},
phoneScreenChanged:function(){
if(this.phoneScreen)
this.$.chipcontainer.style.margin = '10px auto';
else
this.$.chipcontainer.style.margin = '120px auto';
}
});
})();
</script>
</polymer-element>
main-layout.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
<!-- <link rel="import" href="/bower_components/font-roboto/roboto.html"> -->
<link rel="import" href="/bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/core-icons/core-icons.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<link rel="import" href="/bower_components/core-animation/core-animation.html" >
<link rel="import" href="/bower_components/core-animation/core-animation-group.html">
<link rel="import" href="/bower_components/core-media-query/core-media-query.html">
<link rel="import" href="/bower_components/pushstate-anchor/src/pushstate-anchor.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="/bower_components/app-router/src/app-router.html">
<!-- <link rel="import" href="/layouts/single-layout.html"> -->
<polymer-element name="main-layout" attributes="toast">
<template>
<style shim-shadowdom>
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffffff;
}
.pink paper-tab::shadow #ink {
color: #ffffff;
}
paper-tabs::shadow #selectionBar{
background-color:#ffffff;
}
paper-tab::shadow #ink {
color: #ffffff;
}
h3 {
font-size: 16px;
font-weight: 400;
}
#sitename {
font-weight:bold;
}
paper-button::shadow core-icon {
width: 90px;
height: 90px;
}
#navheader img.profile {
border-radius: 50%;
width: 64px;
height: 64px;
margin-bottom: 20px;
}
#navheader {
/* causes console warning for incorrect mimetype */
background-image: url("/layouts/images/background.png");
background-size:cover;
}
#navheader .bottom :last-child {
font-size: small;
opacity: 0.8;
}
#drawerPanel core-header-panel {
background: #fafafa;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
color: #757575;
}
paper-tabs::shadow #selectionBar{
background-color:#ffffff;
}
.footer{
margin-bottom:100px;
}
.headerpanel{
word-wrap: break-word;
}
paper-ripple{
color:#7dd6fe
}
</style>
<core-ajax auto method="GET" headers='{"Access-Control-Allow-Origin":"*","X-Requested-With": "XMLHttpRequest"}' url="http://www.moonmoonbird.com:8888/api/v1/navigation/" handleAs="json" response="{{response}}"></core-ajax>
<!-- drawer navigaiton -->
<core-drawer-panel id="drawerPanel" forceNarrow>
<!-- left drawer nav -->
<core-header-panel class="headerpanel" drawer mode="waterfall-tall">
<paper-ripple fit></paper-ripple>
<core-toolbar id="navheader" class="tall">
<paper-ripple fit class="circle"></paper-ripple>
<!-- </core-image> -->
<img class="middle profile" src="/layouts/images/avatar.jpg" ></img>
<div class="bottom" layout vertical>
<span>Peng Kim</span>
<span>lomoonmoonbird@gmail.com</span>
</div>
</core-toolbar>
<div vertical layout >
<div style="line-height:30px;margin:10px;font-size:15px;text-indent: 45px;">full stack engineer ,
love programming , astronomy , sports , making friends , uhm , 25 yo , single!</div>
<div vertical layout style="margin:120px 10px 0px 10px;height:100%;">
<div horizontal justified layout >
<div> <paper-shadow on-mouseover="{{onHovered}}" class="fab" z="0" animated layout center-center><a href="https://www.facebook.com/lomoonmoonbird" target="_blank"><paper-fab on-mouseover="{{onHovered}}" style="background:#7dd6fe;" src="/layouts/images/social/white_facebook.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://www.flickr.com/photos/131857227@N04/" target="_blank"><paper-fab style="background:#972ff8;" src="/layouts/images/social/white_flickr.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://github.com/lomoonmoonbird" target="_blank"><paper-fab style="background:#8bc34a;" src="/layouts/images/social/white_github.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="http://www.linkedin.com/profile/view?id=408353888&trk=nav_responsive_tab_profile_pic" target="_blank"><paper-fab style="background:#ff5722;" src="/layouts/images/social/white_linkedin.png"></paper-fab></paper-shadow>
</div>
</div>
<div horizontal justified layout>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="http://www.quora.com/Lo-Moonmoonbird" target="_blank"><paper-fab style="background:#ffeb3b;" src="/layouts/images/social/white_quora.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><paper-fab style="background:#00bcd4;" src="/layouts/images/social/white_skype.png"></paper-fab></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="http://stackoverflow.com/users/4532062/peng-kim" target="_blank"><paper-fab style="background:#ff4081;" src="/layouts/images/social/white_stackoverflow.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://www.tumblr.com/blog/moonmoonbird" target="_blank"><paper-fab style="background:#ff9800;" src="/layouts/images/social/white_tumblr.png"></paper-fab><a/></paper-shadow>
</div>
</div>
<div horizontal justified layout>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://twitter.com/lomoonmoonbird" target="_blank"><paper-fab style="background:#03a9f4;" src="/layouts/images/social/white_twitter_bird.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://vimeo.com/user39373583" target="_blank"><paper-fab style="background:#972ff8;" src="/layouts/images/social/white_vimeo.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="https://www.youtube.com/channel/UCH2lj2P2y98Ojiz3jTqj7Nw" target="_blank"><paper-fab style="background:#dc3c84;" src="/layouts/images/social/white_youtube.png"></paper-fab></a></paper-shadow>
</div>
<div> <paper-shadow class="fab" z="0" animated layout center-center><a href="http://weibo.com/2033560135/profile?topnav=1&wvr=6" target="_blank"><paper-fab style="background:#fe774d;" src="/layouts/images/social/white_sina.png"></paper-fab></a></paper-shadow>
</div>
</div>
</div>
<div flex style="text-align:center;line-height:30px;margin:10px;font-size:15px;"> ©2015 moonmoonbird.com</div>
<div flex></div>
</div>
</core-header-panel>
<!-- end -->
<!-- main nav -->
<core-header-panel main mode="waterfall">
<core-toolbar id="mainheader" class="medium-tall">
<!-- <paper-icon-button id="navicon" icon="menu" core-drawer-toggle></paper-icon-button> -->
<paper-icon-button id="navicon" src="/layouts/images/moonmoonbird.png" core-drawer-toggle></paper-icon-button>
<div horizontal layout id="sitename" flex>Moonmoonbird</div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<!-- sitename animation -->
<core-animation-group type="par" id="sitenameanim">
<core-animation duration="300">
<core-animation-keyframe>
<core-animation-prop name="opacity" value="1">
</core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="opacity" value="0.3">
</core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="opacity" value="1">
</core-animation-prop>
</core-animation-keyframe>
</core-animation>
<core-animation duration="300">
<core-animation-keyframe>
<core-animation-prop name="transform" value="scale(1)">
</core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="transform" value="scale(1.2)">
</core-animation-prop>
</core-animation-keyframe>
<core-animation-keyframe>
<core-animation-prop name="transform" value="scale(1)">
</core-animation-prop>
</core-animation-keyframe>
</core-animation>
</core-animation-group>
<div class="bottom fit" horizontal layout >
<paper-tabs id="tabs" selected="{{defaulttab}}" flex >
<template repeat="{{navigations as nav}}">
<paper-tab name="{{nav.navurl}}">{{nav.name}}</paper-tab>
</template>
</paper-tabs>
</div>
</core-toolbar>
<!-- <single-layout flex id="singlelayout" show="{{navgations[0].name}}" navurl={{navurl}}></single-layout> -->
<content class="content"></content>
</core-header-panel>
<!-- end -->
<core-media-query query="max-width: 640px"
queryMatches="{{phoneScreen}}"></core-media-query>
</core-drawer-panel>
</template>
<script>
(function(){
Polymer('main-layout',{
domReady:function(){
var animation = this.$.sitenameanim;
animation.target = this.$.sitename;
animation.play();
var tabs = this.$.tabs;
var list = this.$.singlelayout;
var toast = this.toast;
that = this;
tabs.addEventListener('core-select', function() {
if(tabs.selected != that.response[0].navurl){
toast.show();
return;
}
list.navurl = tabs.selected;
});
},
responseChanged:function(oldresponse){
this.navigations = this.response;
this.defaulttab = this.response[0].navurl;
},
});
})();
</script>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="/icon.png">
<title>moonmoonbird </title>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/bower_components/app-router/src/app-router.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #fafafa;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body unresolved>
<app-router>
<app-route path="/" import="/pages/home-page.html"></app-route>
</app-router>
</body>
</html>
+3
source to share
No one has answered this question yet
Check out similar questions: