I´m a polymer beginner. I´ve installed Polymer v1.7, and i´m trying to build a simple form. In my application tried to put a paper-input, but is not displayed at all. Checking the DOM, noticed the element is there, but is not rendered. And, in the console some paper related messages are shown.
I´ve decided to build a completely new basic project just for testing that single element, but again, the element is not working and the messages persist.
My current code is:
bower.json
{
"name": "test001",
"main": "index.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.10",
"iron-form": "PolymerElements/iron-form#^1.1.4",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.7"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
test001-app:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input">
<dom-module id="test001-app">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]</h2>
<paper-input label="Etiqueta"></paper-input>
</template>
<script>
Polymer({
is: 'test001-app',
properties: {
prop1: {
type: String,
value: 'test001-app',
},
},
});
</script>
</dom-module>
console messages:
Behavior Polymer.IronA11yKeysBehavior not found when mixing properties
into paper-input! docs.js:126
Behavior Polymer.IronFormElementBehavior not found when mixing
properties into paper-input! docs.js:126
Behavior Polymer.IronFormElementBehavior not found when mixing
properties into paper-textarea! docs.js:126
Behavior Polymer.IronA11yKeysBehavior not found when mixing properties
into Polymer.PaperInputBehavior!
I tried putting some content between open and close paper tag (ie: abc) and is displayed, but not as input element (just as a basic text)
Your HTML import for <paper-input> is incorrect:
<!-- wrong -->
<link rel="import" href="../../bower_components/paper-input">
It should be:
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
Related
I am trying to create HTML templates from JSON object and able to render elements but the events are not getting added to the element and not showing up in the developer tools/Shadow DOM.
Codepen for reference - https://codepen.io/nagasai/pen/bRjWbd
Issue: Events - onkeypress, onkeyup,onchange are not showing on input and checkbox elements and couldn't add them but other options are showing up like name, type(Again type is getting displayed only for checkbox but not for textbox)
Screenshot for actual issue
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<x-foo attr='[{
"type":"text",
"title":"Textbox Name",
"name":"temp",
"requried":"requried",
"onkeypress":"testKeyPress()",
"onkeyup":"testKeyUp()",
"onchange":""
},{
"type":"checkbox",
"title":"CheckBox Name",
"name":"temp",
"requried":"requried",
"disabled":"disabled",
"onkeypress":"",
"onkeyup":"",
"onchange":"testChange()"
}]'></x-foo>
<dom-module id="x-foo">
<template>
<template is="dom-repeat" items="{{attr}}">
<label>{{item.title}}</label>
<input type="{{item.type}}"
required="{{item.required}}"
name="{{item.name}}"
onchange="{{item.onchange}}"
onkeypress="{{item.onkeypress}}"
onkeyup="{{item.onkeyup}}()"
>
</template>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {
attr:{
type:Array
}
};
}
}
customElements.define(XFoo.is, XFoo);
Correct me if I'm wrong but it should be:
on-change="{{item.onchange}}"
on-keypress="{{item.onkeypress}}"
on-keyup="{{item.onkeyup}}()"
Reference: https://www.polymer-project.org/2.0/docs/devguide/gesture-events
I am trying to implement a custom filter using Polymer v1.7.0 currently. However, it does not work at all; when I try to use a filter the output is just the raw expression, unprocessed.
I have tried it like it's done here: https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/filters/using-custom-filters.html but using this code:
<div id="toFixed">{{10.123456789 | toFixed(2)}}</div>
only results in
{{10.123456789 | toFixed(2)}} in the resulting document.
Is my linked source outdated? I couldn't find any valuable information in the Polymer docs so a nudge into the right the direction is appreciated.
You don't need pipe in Polymer 1.x to achieve this. You can directly call an function and pass it the value that you want to
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
<template>
{{format(myVal)}}
<br>{{format("hello")}}
</template>
</dom-module>
<script>
Polymer({
is: "my-element",
properties: {
myVal: {
type: String,
value: "Hi"
}
},
format: function(input) {
return input + " John";
}
});
</script>
<my-element></my-element>
I've been trying to use Polymer for a project I'm working on. And although I enjoyed it quite a lot so far, I ran into a problem I just can't solve.
I dumped it down to a simple example. Basically it's just a list element (item-list) that contains item elements (item-card) and i want to parse the items position to the element via the attribute pos. But for some reason the items attribute is allways undefined! Is this because the attribute is bound to the variable i, which dies after the template repeat? If so, how do I work around it? Is there a different approach I should be using here?
SOLUTION: You can find the solution by reading through all the comments, but to sum it up: apperantly there was a timing issue and the attribute wasn't ready at the ready callback. But I found out about the domReady callback (polymer lifecycle documentation). Using domReady it works just fine! Thanks to Günter Zöchbauer for the help!
This is the item-list.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="item-card.html">
<polymer-element name="item-list">
<template>
<style>
</style>
<template repeat="{{values, i in data.data}}">
<item-card pos="{{i}}"></item-card>
</template>
</template>
<script>
Polymer({
created: function()
{
this.num = 123456;
this.data = { "data":
[
{
"value":999
},
{
"value":666
},
{
"value":555
},
{
"value":222
}
]
};
}
});
</script>
</polymer-element>
This is the item-card.html
<link rel="import" href="components/polymer/polymer.html">
<polymer-element name="item-card" attributes="pos">
<template>
<style>
</style>
</template>
<script>
Polymer({
ready: function()
{
console.log("ready: " + this.pos);
}
});
</script>
</polymer-element>
I didn't bother putting the index.html in, since it just containts one item-list element.
Thanks alot!!
I think you need a pos field in <item-card> in addition to the attributes="pos" declaration.
The repeated element also references the bound model which can be accessed like querySelector('item-card').templateInstance.model property.
See https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286 for an example.
Info:
According to the comments it turned out to be a timing issue. The value wasn't yet assigned when the ready callback was called but using domReady worked.
Sorry this is such a basic newbie question; I can't find anything in the Polymer documents. Say I have a set of cards - like in the getting started tutorial - each with some info. Can I add a button supplying an anchor/link to more detail/ document/image/pdf... Is it possible to set those links into polymer via json?
Here is what I've tried:
Placing url links (tried absolute and relative) in json, like:(excerpt){
"uid": 4,
"text" : "Blah blah blah",
"Legal" : "Case",
"iconurl" : "../images/svgs/goto.svg",
"url":"http://www.bailii.org/ew/cases/EWHC/Admin/2013/314.html",
"username" : "BBCS",
"avatar" : "../images/svgs/complaint.svg",
"favorite": false,
"stage": "incident"
},
{
"uid": 5,
"text" : "Blah blah blah",
"Legal" : "Contact Guidance",
"iconurl" : "../images/svgs/goto.svg",
"url":"../assets/docs/stuff.pdf",
"username" : "SCSC",
"avatar" : "../images/svgs/complaint.svg",
"favorite": false,
"stage": "incident"
}
...and then, in post-list, imported paper-button and paper-icon-button, and used paper-icon-button to link to "iconurl", like so:
<paper-icon-button src="{{post.iconurl}}" onclick="_onclick()">Go</paper-icon-button>
This binding on src doesn't work. Nor does explicitly setting a custom icon on src:
e.g. src="../images/svgs/goto.svg" - but in both cases the text Go does appear as a paper button. If I place the icon source inside paper-icon-button css style as background-image then it does show up - repeatedly... as long as there is text also. No text; no image.
Then in script tag in post-list template I have placed an _onclick() function:
function _onclick(){
document.getElementById("{{post.url}}");
};
with and without handlebars...
Here is the full code for post-list.html. ( I have taken the postcard tutorial and am playing about with it...).
The paper-icon-button now works in this scenario. The greyed out version didn't. And as for my javascript attempts to bind to json - all commented out here below - well, nothing works.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">
<link rel="import"
href="../components/paper-button/paper-button.html">
<link rel="import"
href="../components/paper-icon-button/paper-icon-button.html">
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
paper-icon-button{
float:right;
margin-left: 30px;
margin-right: 20px;
color: #0dddad;
<!--background-image: url("../images/svgs/goto.svg");-->
}
</style>
<post-service id="service" posts="{{posts}}">
</post-service>
<div layout vertical center>
<template repeat="{{post in posts}}">
<post-card>
<img src="{{post.avatar}}" width="70" height="70">
<paper-icon-button
raisedButton
class="colored"
iconSrc="../images/svgs/eyeyeY.svg"
on-click="{{goLink}}"></paper-icon-button>
<!--<paper-icon-button src="../images/svgs/eyeyeO.svg" onclick="_onclick()">o</paper-icon-button>-->
<h2>{{post.username}}</h2>
<p>{{post.text}}</p>
<h4>{{post.Legal}}</h4>
</post-card>
</template>
</div>
</template>
<script>
Polymer({});
//Polymer('post-list', {
//goLink: function(e) {
//window.getElementById=e.target.open({{api/post.url}});
//return document.getElementById("post.url")
//document.location.href =e.target("{{post.url}}");
// };
//});
</script>
</polymer-element>
I am trying to display a toast when an ajax request fails using core-ajax and paper-toast elements. I created an handler that calls show on the paper-toast element. However it is still not showing...
What am I doing wrong?
Is there a better way to do that? (Maybe having the same toast element for all the application messages)
Here it follows my custom element code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<polymer-element name="fd-rest-element-service" attributes="fditems fdtype">
<template>
<style>
:host {
display: block;
}
paper-toast {
z-index: 1000;
bottom: 40px;
left: 10px;
}
</style>
<paper-toast id="toast" text="There was a problem loading {{fdtype}} data.">
</paper-toast>
<core-ajax id="ajax"
auto on-core-error="{{errorHandler}}"
url="https://wrong.url.com:9113/{{fdtype}}/"
disabled-on-core-response="{{elementsLoaded}}"
response="{{fditems}}"
handleAs="json" withCredentials >
</core-ajax>
</template>
<script>
Polymer('fd-rest-element-service', {
fdtype:'environments',
created: function() {
this.fditems = [];
},
elementsLoaded: function() {
// Make a copy of the loaded data
console.log(this.fdtype +" : "+ this.$.ajax.response);
this.fditems = this.$.ajax.response.slice(0);
},
errorHandler: function(event){
console.log(event);
console.log(this.$.toast);
this.$.toast.show();
}
});
</script>
</polymer-element>
Since I have got no console error and the logged objects are as expected I believe the problem arises because the element is used inside an element managed by core-animated-pages that is not displayed. Any suggestion on how to create a shared toast element that can be accessed by the other elements in my application?
I ended up creating the paper-toast element inside the outmost element and then pass it through the children element via a toast attribute.
Here it follows some sample code. In my root element I created a paper-toast element referenced by id and share "top-down" in the other inner elements.
<paper-toast
id="toast"
text="There was a problem loading data.">
</paper-toast>
<fow-login user="{{user}}" userPhoto="{{userPhoto}}"
class="loginButton"
toast="{{$.toast}}"
token="{{token}}">
</fow-login>
In my inner element I use it like this:
<polymer-element name="fow-login" attributes="toast user userPhoto globals appID token">
...
<script>
...
loginFail: function(event){
console.log("Error:", event);
if(this.toast){
this.toast.text="There was a login problem.";
this.toast.show();
}
},
...
</script>
</polymer-element>