How do I use the response data from iron-form to trigger the dom-if template? I want to show the template if there was data was returned. This code is not working. What am I doing wrong here?
<link rel="import" href="../components/polymer/polymer-element.html">
<link rel="import" href="../components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../components/iron-form/iron-form.html">
<dom-module id="a-tag">
<template>
<iron-form>
<form action="/" method="get">
<input name="test">
<button></button>
</form>
</iron-form>
<template class="iftemplate" is="dom-if" if="[[data]]">
<p>HELLO</p>
</template>
</template>
<script>
class ATag extends Polymer.Element {
static get is() {return 'a-tag'}
ready() {
super.ready()
this.shadowRoot.querySelector('iron-form').addEventListener('iron-form-response', (event) => {
this.shadowRoot.querySelector('.iftemplate').data = event.detail.response
})
}
}
customElements.define(ATag.is, ATag)
</script>
</dom-module>
You are doing many wrong things here,
first I would advice to add an id to the form element iron-form so you can point easily in your Polymer element's code.
<iron-form id="my-form">
...
</iron-form>
and add the event listener like that :
this.$['my-form'].addEventListener('iron-form-response', ...);
Also you are trying to add a property data to the template dom-if I don't understand why. [[data]] references a property in your element's scope. You have to define this property in the correct section.
static get properties () {
return {
data: {
type: String,
value: ''
}
};
}
and in your event listener callback :
ready() {
super.ready()
this.$['my-form'].addEventListener('iron-form-response', (event) => {
// this.data = event.detail.response;
this.data = 'some data'; // for testing
});
}
Related
How to bind a dynamic path in Polymer?
For instance:
Lets say our component has 2 properties:
list: an array of objects.
map : a javascript object which map sub-objects.
Each item in the list has a property key which is the key to get the value from the map property.
I would like to "dynamic" bind a path like map[item.key]. The only way to do something like this is to make a function, but it will not be triggered on changes of properties and sub-properties of map. =/
In the following snippet, you can see, by clicking on the button, it will dynamicly place an object in the map.key2 property, using the Polymer.Element.set method. But this doesn't trigger any changes because Polymer doesn't bind a path. It only execute the display function once.
So this Stackoverflow answer doesn't help (even though it's the same question).
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="employee-list.html">
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/components/polymer/lib/elements/dom-repeat.html">
<dom-module id="my-element">
<template>
<ul>
<template is="dom-repeat" items="[[list]]">
<!--Bind something like this-->
<li> [[ _getAt(item.key) ]] </li>
</template>
</ul>
<!--This button will add the 2nd object-->
<paper-button on-tap="_onButtonClicked" raised>Add key 2</paper-button>
</template>
<script>
class MyElement extends Polymer.Element {
static get is(){
return "my-element";
}
static get properties(){
return {
list : {
type : Array,
value : function () {
return [
{
key : "key1",
// ...
},
{
key : "key2",
// ...
},
// ...
]
}
},
map : {
type : Object,
value : function () {
return {
key1 : {
message : "Hello",
// ...
},
// ...
}
}
}
};
}
_onButtonClicked(){
// Add the 2nd object
this.set("map.key2", {
message : "World",
});
console.log("key 2 added");
}
_getAt(key){
if (this.map[key])
return this.map[key].message;
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
<my-element></my-element>
The Polymer documentation says that it's possible to build a path in a array. But I didn't find a way to bind an array of string as a path.
"The only way to do something like this is to make a function, but it
will not be triggered on changes of properties and sub-properties of
map"
You can make this work by passing the objects/properties that are changing.
Basic example
this will NOT update:
<template is="dom-repeat" items="[[_getItems()]]"></template>
this WILL update:
<template is="dom-repeat" items="[[_getItems(list)]]"></template>
Now the dom-repeat will fire again once the property 'list' changes.
Let's say you have 2 properties, and you want to re-run dom-repeat when one of them changes:
<template is="dom-repeat" items="[[_getItems(list, somethingElse)]]"></template>
You might also want to take a look at https://www.polymer-project.org/1.0/docs/devguide/model-data#override-dirty-check
EDIT:
Where are you updating the property LIST? dom-repeat wont run again until that property is changed
DOUBLE EDIT:
try this (polygit is currently having server issues):
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="employee-list.html">
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/components/polymer/lib/elements/dom-repeat.html">
<dom-module id="my-element">
<template>
<ul>
<template is="dom-repeat" items="[[list]]">
<!--Bind something like this-->
<li> [[ _getAt(item.key, map, list) ]] </li>
</template>
</ul>
<!--This button will add the 2nd object-->
<paper-button on-tap="_onButtonClicked" raised>Add key 2</paper-button>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() {
return "my-element";
}
static get properties() {
return {
list: {
type: Array,
value: function() {
return [{
key: "key1",
// ...
},
{
key: "key2",
// ...
},
// ...
]
}
},
map: {
type: Object,
value: function() {
return {
key1: {
message: "Hello",
// ...
},
// ...
}
}
}
};
}
_onButtonClicked() {
var foo = this.list;
this.set("map.key2", {
message: "World",
});
this.set("list", {});
this.set("list", foo);
console.log("key 2 added");
}
_getAt(key) {
if (this.map[key])
return this.map[key].message;
}
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
<my-element></my-element>
Here is a simple polymer element which just access an inner element using its id and this.$.[elementId], and then log it. Running, this simple code, you will be able to see that the returned element undefined. Why?
<dom-module id="custom-element">
<template>
<template is="dom-if" if="[[condition]]">
<div id="main"></div>
</template>
</template>
<script>
class CustomElement extends Polymer.Element {
static get is() { return "custom-element"; }
static get properties() {
return {
condition : Boolean
};
}
ready(){
super.ready();
console.log(this.$.main); // logs "undefined"
}
}
customElements.define(CustomElement.is, CustomElement);
</script>
</dom-module>
The Polymer this.$ only references elements from local DOM which are not added dynamicly. Thus, elements placed inside dom-if or dom-repeat templates are not added to the this.$ object.
If you wish to select a dynamic element you need to go to the dom and use something like this.shadowRoot.querySelector('#main')
Here's a solution to get rid of this problem. Add the following code in your ready():
if (this.$)
this.$ = new Proxy(this.$, {
get: ($, id) => $[id] || this.shadowRoot.getElementById(id),
set: ($, id, element) => {
$[id] = element;
return true;
}
});
I noticed that template/data-binding in Polymer doesn't seem to reflect when a array property is mutated (i.e. push()). Sample code below:
<body>
<dom-module id="my-element">
<template>
<pre>
[my-element]
myArray: [[jsonStringify(myArray)]]
</pre>
</template>
</dom-module>
<my-element id="elm"></my-element>
<button onclick="pushArray()">pushArray</button>
<button onclick="setArray()">setArray</button>
<script>
(function registerElements() {
Polymer({
is: 'my-element',
properties: {
myArray: {
type: Array,
value: function () {
return [];
}
}
},
pushArray: function(value) {
this.push('myArray', {id: value});
},
setArray: function(value) {
this.set('myArray', [{id: value}]);
},
jsonStringify: function(obj) {
return JSON.stringify(obj);
}
});
})();
function pushArray () {
var elm = document.querySelector('#elm');
elm.pushArray('Push');
}
function setArray () {
var elm = document.querySelector('#elm');
elm.setArray('Set');
}
</script>
</body>
Whenever I click the pushArray button, an item "Push" should be added in myArray, but it wasn't reflected in the template [[jsonStringify(myArray)]]. is this an expected behavior? Anyway to work around this?
The Array change observer is a bit tricky. In your code, by using myArray, you implicitly observe (only) the reference for the (whole) array, which only changes when you run setArray.
In order to overcome this, you must also use a deep observer, namely myArray.*. The correct code for your dom-module is therefore the following:
<dom-module id="my-element">
<template>
<pre>
[my-element]
myArray: [[jsonStringify(myArray, myArray.*)]]
</pre>
</template>
</dom-module>
Live demo: http://jsbin.com/yulivuwufu/1/edit?html,css,output
No other code changes are necessary.
I'm a little new to Polymer and don't quite get what's happening here. I'm trying to create a simple form page. This is the code:
<dom-module id="sams-add-student">
<template >
<div class="vertical-section">
<paper-button on-click="addstudent">SUBMIT</paper-button>
</div>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'sams-add-student',
properties: {
item: {
type: Object
},
addstudent: function (event) {
console.log('addstudent');
}
}
});
})();
</script>
</dom-module>
However, I get an error that the listener method is not defined. Am I missing something?
You've incorrectly declared the addstudent method inside properties when it should actually be outside properties at the top-level of the object.
Polymer({
is: 'sams-add-student',
properties: {
// addstudent: function() {...} // DON'T DO THIS HERE
},
addstudent: function() {...} // DO THIS HERE
}
codepen
If it is a paper input, you could use something like :
this.$.IDofyourelement.value;
i have a polymer custom element like this
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript>
<template>
hello from {{options.name}}
</template>
<script>
Polymer({
get options() {
return this.controller.options;
}
});
</script>
</polymer>
<div id="container"></div>
<script>
document.addEventListener('polymer-ready',function() {
var foo = new MyFoo();
foo.controller = {
options : {
name : "here"
}
};
document.body.appendChild(foo);
});
</script>
attribute "controller" is expected to be a object having a property "options" of type object.
I can create a Instance of the custom element using
var foo = new Foo();
but i am unable to set the attribute "controller" which results in an error:
Uncaught TypeError: Cannot read property 'options' of undefined.
Sure - i could modify the options getter in the polymer component to be fail-safe like this :
...
get options() {
return this.controller ? this.controller.options : null;
}
...
But also in this case the custom element doesnt recognize the applied data.
Final question : How do I pass required attributes to an custom element constructor ?
One solution is to use a computed property:
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript>
<template>
hello from {{options.name}}
</template>
<script>
Polymer({
computed: {
options: 'controller.options'
}
});
</script>
</polymer-element>
<script>
document.addEventListener('polymer-ready',function() {
var foo = new MyFoo();
document.body.appendChild(foo);
foo.controller = {
options : {
name : "here"
}
}
});
</script>
You can even make the computed property just a call to a method. The key thing is that by doing it this way, Polymer can tell when to check if options has changed, because it knows the inputs necessary to compute options.
Polymer({
computed: {
options: 'getOptions(controller)'
},
getOptions: function(controller) {
return controller ? controller.options : null;
}
});