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)
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 show a paper-dropdown-menu only when a specific value is selected in another paper-dropdown-menu.
I am using a property called selectedValue to bind selected value to the if attribute in a dom-if template.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<dom-module id="my-element">
<template>
<paper-dropdown-menu label="One" no-animations>
<paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedValue}}">
<template is="dom-repeat" items="[[options1]]">
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<template is="dom-if" if="[[_view()]]">
<paper-dropdown-menu label="Two" no-animations>
<paper-listbox slot="dropdown-content" class="dropdown-content">
<template is="dom-repeat" items="[[options2]]">
<paper-item>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</template>
<script>
/**
* #customElement
* #polymer
*/
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
selectedValue : {
type : String
},
options1 : {
type: Array,
value: [1,2,3,4]
},
options2 : {
type: Array,
value : [5,6,7]
}
};
}
_view() {
return this.selectedValue === "1";
}
}
window.customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
The problem is the second paper-dropdown-menu is never displayed.
The problem is your computed binding has no dependencies, so it's invoked once at initialization. Since selectedValue is initially undefined, _view() returns false, causing the dom-if to hide its contents.
To cause the computed binding to re-evaluate selectedValue, make sure to specify the variable as an argument to the binding:
<template is="dom-if" if="[[_view(selectedValue)]]">...</template>
Also note that <paper-listbox>.selected (to which selectedValue is bound) is a number by default (i.e., the index of the selected item), so this expression always evaluates to false:
selectedValue === "1"
I recommend switching the literal from a string to a number:
selectedValue === 1
So, the _view function should look like this:
_view(selectedValue) {
return selectedValue === 1;
}
demo
I need to set the name of a class dynamically executing a function after an iron-ajax request.
In the template section of my element I have:
<div class="{{dynamicClass}}"></div>
I have defined this property like this:
Polymer({
is: "fila-contenido"
,
properties: {
dynamicClass: {
type: Number
}
}
...
I have an on-response function executed when iron-ajax responses:
_onResponse: function (e) {
var nro = e.detail.response.length;
switch(nro){
case 2:
this.dynamicClass = "class2";
break;
case 3:
this.dynamicClass = "class3";
break;
...
}
}
This function set the name of the class correctly.
The problem is the output is not showing the dynamic class but:
<div class="style-scope fila-contenido"></div>
How may I do this?
Thanks!
To bind to the native class attribute, use attribute binding (i.e., class$=). Otherwise, Polymer treats it as a property binding.
<div class$="{{dynamicClass}}">
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<x-foo clazz="highlight"></x-foo>
<dom-module id="x-foo">
<template>
<style>
.highlight {
color: blue;
background: lightgray;
}
</style>
<span class$="{{clazz}}">hello world</span>
</template>
</dom-module>
</body>
codepen
I have a behavior that is shared across elements.
In a element i have a on-change="_toggle" switch.
In a second element i have the same code from the first element without the switch button. when the switch is active it reflect to the element containing the switch.
Q: how can i reflect the on-change="_toggle" function across all elements?
my code:
1.
<script>
LanguageBehavior = {
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
language: {
value: 'sl',
reflectToAttribute: true
},
},
attached: function() {
this.loadResources(this.resolveUrl('/data/locales.json'));
},
_toggle: function() {
this.language = this.$.switch.checked ? 'en' : 'sl';
// This function is the problem?
}
};
</script>
2
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">
<dom-module id="bazdara-element-1">
<template>
<style>
:host {
display: block;
}
</style>
{{localize('menu_2')}} // THIS CHANGES WITH THE SWITCH
<span title="english">🇬🇧 SI</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">EN</span>
</template>
<script>
Polymer({
is: 'bazdara-element-1',
behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
});
</script>
</dom-module>
3
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="behavior.html">
<dom-module id="bazdara-element-2">
<template>
<style>
:host {
display: block;
}
</style>
{{localize('menu_2')}} // THIS Doesnt change
</template>
<script>
Polymer({
is: 'bazdara-element-2',
behaviors: [Polymer.AppLocalizeBehavior, LanguageBehavior],
});
</script>
</dom-module>
As each element will have its own copy of the behavior your approach is not going to work. Right now the only options i can come up with is:
keep both your elements in one common element and change the property there.
If you are planning to have all your elements in one single html file you can then change this feature in that html file and bind the property to all your elements.
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>