Polymer dom-repeat is not working as expected, when I add a new element to the Array dynamically, dom-repeat not displaying the value.
I am using the Polymer's array mutation methods when pushing items into the array, but still not working.
Please check the codepen link;
<dom-module id="wind-studio-widget">
<template>
<div on-tap='_addNewPad' style="cursor:pointer"><strong>Click Me</strong></div>
<template id="padListContainerId" is="dom-repeat" items="[[padList]]">
<p style="border:1px solid red"> <span>[[item.id]]</span></p>
</template>
</template>
</dom-module>
<script type="text/javascript">
Polymer({
is: 'wind-studio-widget',
properties: {
baseUrl: {type: String},
padList: {
type: Array,
notify: true
},
padListAverage: {type: Object}
},
ready: function () {
//this.baseUrl = localStorage.baseUrl;
//this.loadPadData();
this.padList = [{'id':'1'},{'id':'2'}];
},
_addNewPad: function () {
var newPadList = this.padList;
newPadList.push({'id':'3'});
this.set('padList', []);
this.set('padList', newPadList);
console.log(this.padList);
//this.$.padListContainerId.render();
}
});
</script>
http://codepen.io/nareshchennuri/pen/vxjvdO
Related
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.
This is a common question in Polymer about updating view when model was updated (answer is to use this.set or this.push Polymer methods).
But when I have two elements:
First element:
properties:{
items: {
type: Array
}
},
someFunction: {
this.push('items', {'Name': 'something'});
}
Second Element has property which is bound to 'items' from first element
ready: function(){
this.items = firstElement.items;
}
I would like second element 'items' to be updated when 'items' updated on firstElement. I can't manually notify secondElement, because of app restrictions.
So for now I see (in devTools) that model of second element is correct ('items' contains objects), but view isn't updated.
How to update it?
You need to set notity on the property of the first element to receive changes outside of the element itself
properties:{
items: {
type: Array,
notify: true
}
},
then, in secondElement you can
<firstElement items="{{items}}" />
Let Polymer's two-way binding handle the notifications for you.
Consider two elements, x-foo and x-bar, in a container element, x-app.
In x-foo, declare items with notify:true so that its changes would be propagated upward.
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: function() { return []; },
notify: true
}
}
});
In x-app, bind x-foo's items to x-bar's.
<dom-module id="x-app">
<template>
<x-foo items="{{items}}"></x-foo>
<x-bar items="[[items]]"></x-bar>
</template>
<script>
Polymer({ is: 'x-app' });
</script>
</dom-module>
Now, x-bar would be notified of all changes to the items array (when an item is added/removed).
HTMLImports.whenReady(() => {
"use strict";
Polymer({
is: 'x-app'
});
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: function() { return []; },
notify: true
}
},
_addItem: function() {
this.push('items', {name: 'item' + this.items.length});
}
});
Polymer({
is: 'x-bar',
properties: {
items: {
type: Array
}
}
});
});
<head>
<base href="https://polygit.org/polymer+1.6.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-app></x-app>
<dom-module id="x-app">
<template>
<x-foo items="{{items}}"></x-foo>
<x-bar items="[[items]]"></x-bar>
</template>
</dom-module>
<dom-module id="x-foo">
<template>
<h2><code>x-foo</code></h2>
<button on-tap="_addItem">Add item</button>
</template>
</dom-module>
<dom-module id="x-bar">
<template>
<h2><code>x-bar</code></h2>
<ul>
<template is="dom-repeat" items="[[items]]">
<li>[[item.name]]</li>
</template>
</ul>
</template>
</dom-module>
</body>
codepen
I have a polymer component included inside another polymer component like this
<dom-module id="custom-component2">
<template>
<custom-component1 id="component1" type="abc" config="xyz"></custom-component1>
</template>
</dom-module>
<script>
Polymer({
is: 'custom-component2',
properties: {
},
ready: function() {
},
init: function() {
}
});
</script>
Is there anyway I can add the attributes such as type, config for my "custom-component1" dynamically like -
<dom-module id="custom-component2">
<template>
<custom-component1 id="component1"></custom-component1>
</template>
</dom-module>
<script>
Polymer({
is: 'custom-component2',
properties: {
},
ready: function() {
self.$.component1.type = "abc";
self.$.component1.config = "xyz";
}
});
</script>
or can I pass these options as a whole as an object?
Could someone help me on this please?
This should work:
<dom-module id="custom-component2">
<template>
<custom-component1 id="component1"></custom-component1>
</template>
</dom-module>
<script>
Polymer({
is: 'custom-component2',
properties: {
},
attached: function() {
this.$.component1.type = "abc";
this.$.component1.config = "xyz";
}
});
</script>
Using data-binding with an object:
<dom-module id="custom-component2">
<template>
<custom-component1 id="component1" data={{_data}}></custom-component1>
</template>
</dom-module>
<script>
Polymer({
is: 'custom-component2',
properties: {
_data:{
type: Object,
value: function(){
return {type:"abc", config:"xyz"};
}
},
},
});
</script>
I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me?
<dom-module id="my-map">
<template>
<google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15">
</google-map>
</template>
<script>
Polymer({
is: "my-map"
// I want to change map center here
});
// or here.. I don't know
</script>
In your <script> tag you can create a ready call back function. See lifecycle callbacks
Polymer adds an extra callback, ready, which is invoked when Polymer has finished creating and initializing the element’s local DOM.
In here you can change the longitude and latitude properties of your my-map element which you are passing into the google-map element:
<dom-module id="my-map">
<style>
google-map {
height: 600px;
width: 600px;
}
</style>
<template>
<google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"></google-map>
</template>
</dom-module>
<script>
Polymer({
is: "my-map",
ready: function () {
this.latitude = 37.77493;
this.longitude = -122.41942;
}
});
</script>
Alternatively, if you can give the longitude and lattitude properties default values (see here):
<script>
Polymer({
is: "my-map",
properties: {
longitude: {
type: Number,
value: -122.41942
},
latitude: {
type: Number,
value: 37.77493
}
}
});
</script>
How can I access the value of a property inside a function?
Here is the property
properties:{
name: {type: String}
}
<my-element name="Subrata"></my-element>
Inside <my-element> I have a function like this:
Approach #1
<dom-module id="my-element">
<template>
...
...
</template>
<script>
(function () {
is: 'my-element',
properties:{
name: {type: String}
},
getMyName: function(){
return this.name;
}
})();
</script>
</dom-module>
My another approach was to put the value inside an element but that did not work either.
Approach #2
<dom-module id="my-element">
<template>
<!-- value of name is rendered OK on the page -->
<p id="maxp">{{name}}</p>
</template>
<script>
(function() {
is: 'my-element',
properties: {
name: {type: String}
},
getMyName: function(){
var maxpValue = this.$$("#maxp").innerHTML;
return maxpValue;
}
})();
</script>
</dom-module>
How can I accomplish this? Please help.
Thanks in advance
Instead of using a self-invoking anonymous function, you should be using the Polymer function. Change (function() { ... })(); in your code to read Polymer({ ... });.
Here's an example:
<dom-module id="my-element">
<template>
...
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
properties: {
name: {
type: String
}
},
getMyName: function() {
return this.name;
}
});
</script>
I suggest that you follow the Getting Started guide from the Polymer documentation as it goes over all of this and more. It is a good starting point when you are looking to begin working with Polymer.
You could simple do
this.name
Anywhere in any function to access the variable