为什么我的数据绑定不适用于Polymer
我有一个非常奇怪的问题，这发生在firefox（我使用firefox37）和IE11上，但这在chrome上运行正常，问题是：即使core-ajax请求已响应，并且数据被提取（我可以从devtools看到它，数据自动绑定在chrome上，但firefox和IE没有，然后，当你点击屏幕或任何触发的事件时（例如按F12键），他们显示数据，我不知道为什么会发生这种情况吗？有人见过面吗？
：
on firefox：
点击屏幕前：
点击屏幕后：
：
点击屏幕前：
点击屏幕后：
在firefox和IE11上，点击之前没有任何改变，没有新请求，没有状态改变，但这就是问题，它不是自动数据绑定。
码
主-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>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？