I have the following polymer element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<dom-module id="number-input">
<template>
<paper-input type="number" label="amount" value="{{amount}}"></paper-input>
</template>
<script>
Polymer({
is: "number-input",
properties: {
amount: {
type: Number,
}
}
});
</script>
</dom-module>
The "amount" property is always a string. Even though I define the property as a "Number". Am I missing something or is this normal behaviour ?
Sander.
You need use an ordinary input field directly and specify is="iron-input" and type="number". The type attribute is what ultimately gets you the number field you are looking for. Other number input attributes such "min" should work as well.
You add a label, validator, and error message, around that as described by the polymer paper-input-container documentation.
Try setting a default value to 0 and use pattern for input validation:
<dom-module id="number-input">
<template>
<paper-input type="number" label="amount" value="{{amount}}" pattern="\d+\.?\d*"></paper-input>
</template>
<script>
Polymer({
is: "number-input",
properties: {
amount: {
type: Number,
value:0
}
}
});
</script>
Related
I have the following polymer element :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../shared-styles.html">
<link rel="import" href="../../bower_components/dfw-styles/dfw-styles.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<dom-module id="baseline-policy-create">
<template>
<style include="dfw-styles">
:host {
display: block;
}
.top-button{
float : right;
}
</style>
<div class="outer-buttons">
<paper-menu-button horizontal-align="right" no-overlap="true" no-animations class="top-button">
<paper-button slot="dropdown-trigger" class="dropdown-trigger create-button btn-primary">
<iron-icon icon="menu"></iron-icon>
<span>Create Baseline Policy</span>
</paper-button>
<paper-listbox slot="dropdown-content" class="dropdown-content">
<template is="dom-repeat" items="{{_domains}}">
<paper-item on-tap="getDomainSchema">[[item.label]]</paper-item>
</template>
</paper-listbox>
</paper-menu-button>
</div>
</template>
<script>
class BaselinePolicyCreate extends Polymer.Element {
static get is() {
return 'baseline-policy-create';
}
static get properties() {
return {
_domains: {
type: Array,
value: [{'name':'Package', 'label':'Package'},
{'name':'Subscription', 'label':'Subscription'}] //TODO: is it possible to get these values from an API source
},
requestedDomain: {
type: String,
value : "",
notify : true,
readOnly : true
}
}
}
getDomainSchema(evt) {
console.info("Get the schema for the following domain:", evt.target.innerText);
console.log(this.requestedDomain);
this._setRequestedDomain(evt.target.innerText);
//this.requestedDomain = evt.target.innerText;
console.log(this.requestedDomain);
}
}
customElements.define(BaselinePolicyCreate.is, BaselinePolicyCreate);
</script>
</dom-module>
I've been following this tutorial on data binding : https://www.tutorialspoint.com/polymer/polymer_data_system.htm
In the example, the code for prop-element has a property, myProp, with the attribute readOnly set to true. In the Onclick function, its still able to change the value of the property using this._setMyProp() which isn't defined anywhere explicitly.
I want to do the same in my code. That is, I want to set requestedDomain using this method. I can set it using this line :
this.requestedDomain = evt.target.innerText;
But to do so, I can't set the readOnly flag to true. If I use this._setRequestedDomain, I get an error saying it is not a function. Am I missing some import at the top to allow this to work, or maybe its been removed in Polymer 2?
I have been testing your code and it's ok.
You only will get the error "this.setRequestedDomain is not a function" if your property is set as readOnly = false.
Please, try again and tell me if its ok.
pen code example (without styling)
Here is my JSBin
Click on the "First Name: James" text.
I have an input element within dom-if. In an event, I am making dom-if to pass and so the element will come into existence but I cannot access the input element immediately after making the dom-if condition pass.
May be I need to know when the dom-if is actually evaluated and why the element does not exist even if the condition has become true.
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<template is="dom-if" if="{{!editMode}}">
<span id="name" on-tap="_makeEditable">{{name}}: {{value}}</div>
</template>
<template is="dom-if" if="{{editMode}}">
<paper-input id="input" label="{{name}}" value="{{value}}"></paper-input>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
editMode: {
type: Boolean,
value: false
},
name: {
type:String,
value:"First Name"
},
value: {
type:String,
value:"James"
}
},
_makeEditable: function() {
this.editMode = true;
//how to find the input element here
//this.$$('#input').querySelector("input").focus();
//this.$.input.querySelector("input").focus();
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
This is because setting this.editMode to true does not update the DOM instantaneously.
You should be running your selector asynchronously, so that Polymer has some time to update the DOM, such as:
this.async(function() {
this.$$('#input').focus();
})
Fiddle here.
I'm adding some items to an Array, using the Array mutation methods. The items are displayed within a <dom-repeat> and can can be edited on the fly. While the edits do change the data in the object, any attached observers do not fire to indicate that a change occurred.
tl;dr
I'm properly using the Array mutation methods to push items
this.push("data.contents", {
id: 1,
name: "Modifying this text doesn't trigger an observer"
});
I'm displaying the items in a dom-repeat
These items are displayed using a <dom-repeat>, and the sub-property name is displayed in a <paper-input> where they can be amended on the fly.
<template>
<template is="dom-repeat" items="[[data.contents]]">
<paper-input value="{{item.name::input}}"></paper-input>
</template>
</template>
It seems that while the data is modified in the object itself, any attached observers do not fire for these sub-properties.
I'm attaching wildcard observers
I'm observing using the usual wildcard observers like so:
observers: [
"logChange(data.*)"
],
Notes
Note that:
Changing the item via a direct this.set() like so:
this.set("data.contents.0.name", "Foo")
will trigger the observers just fine
An MCVE for the above.
How to use:
Press the button to push some items to the Array
Edit any one of the added items
Console should log that a change occurred in any of the items (it doesn't)
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<dom-module id="x-example">
<template>
<paper-button on-tap="pushItem">Push to Array</paper-button>
<template is="dom-repeat" items="[[data.contents]]">
<paper-input value="{{item.name::input}}"></paper-input>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
"use strict";
Polymer({
is: "x-example",
properties: {
data: {
type: Object,
value: {
contents: []
}
}
},
observers: [
"logChange(data.*)"
],
pushItem: function() {
this.push("data.contents", {
id: 1,
name: "Modifying this text doesn't trigger an observer"
})
},
logChange: function() {
console.log("change occured!");
}
});
});
</script>
</dom-module>
<x-example></x-example>
Solved here: https://github.com/Polymer/polymer/issues/4140#issuecomment-259465035
The observer isn't firing because you have one-way binding annotations on the items property, which prevents change notifications from flowing up to the element. Change it to: items="{{data.contents}}" and you'll see the changes.
In essence, turn this:
<template is="dom-repeat" items="[[data.contents]]">
<paper-input value="{{item.name::input}}"></paper-input>
</template>
to this
<template is="dom-repeat" items="{{data.contents}}">
<paper-input value="{{item.name::input}}"></paper-input>
</template>
I have a page where I am binding an array to input fields. Data binding seems to be working somewhat strange.
Please have a look at below example
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<template>
<template is='dom-repeat' as='cell' items='{{data}}'>
<paper-input value='{{cell}}'></paper-input>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'base-page',
properties: {
data: {
type: Array,
value: function() {
return [0,0]
}
}
}
});
</script>
<base-page></base-page>
</body>
If I edit the content in the second paper-input, data is changed in both. If I however initialize my data array to e.g. [0, 1], then the cells apparently looks different to start with and therefore it is able to differentiate between the cells and data binding seems to work. Whats the issue?, but more importantly, how can I make it work?
Cheers and thanks :-)
AFAIK plain numbers don't work well in arrays. Especially here where Polymer can't tell them apart properly if they have the same value.
Wrap them in objects like
return [{value: 0}, {value: 0}]
and then use it like
<paper-input value='{{cell.value}}'></paper-input>
How can I bind to a boolean property of an element. It seems this
<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>
does not Work, but I also cant find out how to bind to it when it is exposed like this:
<my-element a-property-of-type-boolean></my-element>
It seems an option is to set the type to Object instead of Boolean, but I am not sure how valid this approach is
Thanks :-)
If you put an attribute on your element, the related property it will always be true. For example in:
<my-element a-property-of-type-boolean='false'></my-element>
a-property-of-type-boolean is true.
So, if you you want to use a Boolean property on your element, I suggest to declare the property with the default value of false and then, if you need to change the value to true, you can add the attribute on you element.
Your Polymer prototype:
Polymer({
is: 'my-element',
properties: {
aPropertyOfTypeBoolean: {
type: Boolean,
value: false
}
}
});
Your element:
<my-element a-property-of-type-boolean></my-element>
As you already figured it out, the behavior of boolean properties has changed in Polymer 1.0 (ref) and now follows the specification of HTML boolean attributes.
You got different solutions to this, but until now I haven't found a clean solution.
As a preface of the solution I'll make a tiny improvement (adding an Id to the problematic element) to your code:
<dom-module id='main-page'>
<template>
<paper-button on-tap='tap'>Click me</paper-button>
<my-element id="myElem" a-property-of-type-boolean></my-element>
<div>In main page it is <div>{{someBoolean}}</div></div>
</template>
</dom-module>
(ref) You could listen to notification's and manually add and remove the attribute from your element (ref).
tap: function() {
if (this.aPropertyOfTypeBoolean) {
Polymer.dom(this.$.myElem).removeAttribute('aPropertyOfTypeBoolean');
} else {
Polymer.dom(this.$.myElem).setAttribute('aPropertyOfTypeBoolean', true);
}
}
If you edit the to use a Boolean attribute you can also set it's property as follows: (it wont reflect in the html unless you use reflectToAttribute: true in the property being defined as Boolean):.
tap: function() {
this.$.myElem.set('aPropertyOfTypeBoolean', Boolean(this.aPropertyOfTypeBoolean));
}
Or you can either hide your element with hidden or template-if solutions.
<template is="dom-if" if="{{someBoolean}}">
<my-element a-property-of-type-boolean></my-element>
</template>
<template is="dom-if" if="{{!someBoolean}}">
<my-element></my-element>
</template>
With hidden
<my-element hidden$="{{someBoolean}}"></my-element>
<my-element a-property-of-type-boolean hidden$="{{!someBoolean}}"></my-element>
Ok, sorry about that guys. I have not done my homework. Everything actually seems to be working exactly as I was hoping for and databinding Works fine. Here is the small example that I did to try and prove my point
<!DOCTYPE html>
<html>
<head>
<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'>
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body>
<dom-module id='my-element'>
<template>
<div>In my element it is <div>{{aPropertyOfTypeBoolean}}</div></div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
properties: {
aPropertyOfTypeBoolean: {
type: Boolean,
value: false,
}
}
});
</script>
<dom-module id='main-page'>
<template>
<paper-button on-tap='tap'>Click me</paper-button>
<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>
<div>In main page it is <div>{{someBoolean}}</div></div>
</template>
</dom-module>
<script>
Polymer({
is: 'main-page',
properties: {
someBoolean: {
type: Boolean,
value: false
}
},
tap: function(){
this.someBoolean = !this.someBoolean;
}
});
</script>
<main-page></main-page>
Add $ at the end of it:
<my-element a-property-of-type-boolean$='{{someBoolean}}'></my-element>