0
Я получаю сообщение об ошибке при попытке применить элемент core-animated-pages с помощью полимера к элементу.Невозможно применить переход на основе анимированных страниц с помощью JS
Я искал код ошибок, отсутствовал связывание элементов, отсутствовал импорт, стили и ничего не нашел.
Идея для небольшого приложения заключается в том, что как только вы нажмете на кнопку входа в систему, указанную в индивидуальном окне входа в систему, она изменит раздел, в котором вход в систему будет новым.
Вот мой код:
контента page.html
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="components/paper-login-box-master/paper-login-box.html">
<polymer-element name="content-page" attributes="sel user pass">
<template>
<style>
#section {
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)) 0% 0% repeat scroll transparent;
}
#core_animated_pages {
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
background-color: rgb(238, 238, 238);
}
core-pages-animated transitions {
width: 100%;
height: 100%;
}
paper-loginbox {
margin-top: 50px;
}
</style>
<core-animated-pages selected="{{ sel }}" transitions="fade-scale">
<section>
<div layout vertical center ng-controller="LoginController">
<paper-loginbox user="{{ user }}" pass="{{ pass }}" on-login="{{ login }}"></paper-loginbox>
</div>
</section>
<section>
<div center>OLA</div>
</section>
</core-animated-pages>
</template>
<!--
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
-->
<script>
Polymer({
sel: 0,
user: "",
pass: "",
login: function() {
this.fire("login");
},
ngMapping: {
ngSel: {
primitive: 'sel'
},
ngUser: {
primitive: 'user'
},
ngPass: {
primitive: 'pass'
},
ngLogin: {
event: "login"
}
}
});
</script>
</polymer-element>
index.html, где я называю элемент и изменить значение выбранного
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>RecordStore - A sua loja de albuns preferida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Encomenda de albuns (Fictício)" />
<script src="components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/core-icon/core-icon.html">
<link rel="import" href="components/core-icons/social-icons.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="content-page.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
#core_scroll_header_panel {
width: 100%;
height: 100%;
position: absolute;
}
core-toolbar {
background: #800000;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
paper-loginbox {
margin-top: 50px;
}
</style>
</head>
<body unresolved>
<core-scroll-header-panel headermargin="85.33333333333334" keepcondensedheader headerheight="128" id="core_scroll_header_panel" >
<core-toolbar id="core_toolbar" class="medium-tall" layout horizontal>
<div class="bottom">
<core-icon icon="store"></core-icon>
<paper-item disabled>Loja</paper-item>
<!--
<core-icon-button icon="post-github"></core-icon-button>
<paper-tabs id="tabs" selected="all" center horizontal layout class="bottom fit">
<paper-tab name="all" layout horizontal center-center flex inline active>All</paper-tab>
<paper-tab name="favorites" layout horizontal center-center flex inline active>Favorites</paper-tab>
</paper-tabs>
-->
</div>
</core-toolbar>
<content-page ng-polymer ng-sel="coise" ng-user="user" ng-pass="upass" ng-login="onlogin()"></content-page>
</core-scroll-header-panel>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="ng-polymer-elements-master/ng-polymer-elements.min.js"></script>
<script>
angular.module('loginApp', ['ng-polymer-elements'])
.controller('LoginController', ['$scope', function($scope) {
$scope.user = "lala";
$scope.onlogin = function() {
$scope.upass = $scope.user;
$scope.coise = 1;
};
}]);
</script>
</body>
</html>
Это я получаю:
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost/components/core-selector/core-selector.html:454:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost/components/core-animated-pages/core-animated-pages.html:418:14)
at core-animated-pages.properties.invokeMethod (http://localhost/components/polymer/polymer.js:9355:12)
at core-animated-pages.properties.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:9344:20)
at Object.Observer.report_ (http://localhost/components/polymer/polymer.js:4890:24)
at Object.createObject.check_ (http://localhost/components/polymer/polymer.js:5296:12)
at callback (http://localhost/components/polymer/polymer.js:4788:20)
Где вы обновляя значение 'sel' и что вы его обновления к? (Вы можете увидеть контекст вокруг исключения на https://github.com/Polymer/core-selector/blob/master/core-selector.html#L454) –
Я использую AngularJS для обновления значения 'sel' на '1' –
Исправлено: в css на индексном файле' core-toolbar' должен быть '# core-toolbar' и в файле-странице,' # core_animated_pages' Однако макет не закончился, так как я Притворившись, он будет работать пока. Благодарим за помощь –