Polymer Repeat in Template Is Not working - polymer

So I have a polymer element, which uses a nested template with repeat attribute. But it doesnt seem to recognize the JSON object being passed in.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="to-do">
<template>
<style>
:host {
display: block;
background: white;
height:400px;
width: 300px;
padding: 20px;
}
paper-input {
width: 70%;
margin: 10px;
display: inline-block;
}
core-icon {
margin: 55px 10px 10px 10px;
display: inline-block;
}
paper-checkbox {
display: block;
width: 100%;
}
</style>
<paper-input floatingLabel label="Enter a Task"></paper-input> <core-icon icon="add-circle"></core-icon>
<div class="tasks">
<template repeat="{{item in tasklist}}">
<paper-checkbox label="{{item.itemName}}"></paper-checkbox>
</template>
</div>
<core-localstorage name="tasks" value="{{tasklist}}"></core-localstorage>
</template>
<script>
Polymer('to-do', {
tasklist: [
{
itemName : "Study",
isDone : true
},
{
itemName : "Cook Dinner",
isDone : false
}
],
ready: function() {
console.log(this.tasklist);
},
addObject: function() {
}
});
</script>
</polymer-element>
It doesnt seem to get tasklist from the script block in the nested template block, but prints it out in the ready block.
You Can see a running demo of the above code here
https://to-do-prateekjadhwani.c9.io/demo.html
Thanks
*****EDIT****
Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration.
So, I believe that this issue is resolved. But feel free to add comment(s) if you think that my reasoning isn't correct.
Thanks in advance.

Since, it was using localstorage, it was using data in tasklist from LocalStorage rather than updating itself with the code iteration. So, I believe that this issue is resolved.

Related

Polymer 2.0 using Shady DOM document.getElementByID()

I am using the Shady DOM in Polymer 2.0 by using the following script
<script>window.ShadyDOM = {force:true};</script>
I have created three custom element logon-email, logon-password and logon-button. When the paper-button is clicked I would like to get the values of the paper-inputs of logon-email and login-password. Using Polymer 1.0 I have used document.getElementById('#emailLogon').value to get the value from another custom element but this returns null in Polymer 2.0 using Shady DOM.
If what I am doing is now not possible what is the alternative to retrieving values from external custom elements from another custom element.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<dom-module id="logon-email">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px};
}
.email_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="email_label">Email</div>
<paper-input label="Please enter your email address" no-label-float></paper-input>
</template>
<script>
class LogonEmail extends Polymer.Element {
static get is() { return 'logon-email'; }
}
window.customElements.define(LogonEmail.is, LogonEmail);
</script>
</dom-module>
<dom-module id="logon-password">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px; };
}
.password_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="password_label">Password</div>
<paper-input id="logonPassword" label="Please enter your password" type="password" no-label-float></paper-input>
</template>
<script>
class LogonPassword extends Polymer.Element {
static get is() { return 'logon-password'; }
}
window.customElements.define(LogonPassword.is, LogonPassword);
</script>
</dom-module>
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<dom-module id="logon-button">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-button {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
margin: auto;
width: 100%;
}
</style>
<paper-button on-click="handleLoginClick" raised class="green">Login</paper-button
</template>
<script>
class LogonButton extends Polymer.Element {
static get is() { return 'logon-button'; }
connectedCallback() {
super.connectedCallback();
}
handleLoginClick(){
console.log('Login button clicked');
var loginEmail = document.getElementById('#logonEmail');
console.log('logonEmail ' + loginEmail);
}
}
window.customElements.define(LogonButton.is, LogonButton);
</script>
</dom-module>
This is the most easy approach at polymer to pass value between elements. So just define the property and set it notify:true to reflect at other elements as fallow :
<paper-input label="Please enter your email address" no-label-float value="{{emailVal}}"></paper-input>
At main document pass emailVal property to your custom elements so you have property in all 3 element like this.emailVal
<logon-email email-val="{{emailVal}}"></logon-email>
<logon-password email-val="{{emailVal}}"></logon-password>
<logon-button email-val="{{emailVal}}"></logon-button>
And define this property in logon-email element and set it notify : true to reflect all property in any changes.
at logon-email
static get properties() { return {
emailVal:{
type:String,
notify:true
},...
and at logon-button element:
handleLoginClick(){
console.log('Login button clicked');
console.log('logonEmail ', this.emailVal);
}
Hope clear .

Polymer : Property 'response' bound to attribute 'last-response' not found in 'properties' for element 'menu-kaart'

I'm working on a project in polymer and while I was busy, I get this error:
Property 'response' bound to attribute 'last-response' not found in 'properties' for element 'menu-kaart'
Since I am new to polymer, I don't know what to do. I searched over the internet and I can't find the solution.
Here is the code:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="menu-kaart">
<template>
<style>
:host {
display: block;
background-color: maroon;
padding: 15px;
color: deepskyblue;
}
body {
margin: 0px;
}
h1 {
color: antiquewhite;
text-decoration: none;
}
h3, p {
color: antiquewhite;
}
div {
color: white;
}
</style>
<iron-ajax
auto
url="/cgi-bin/menulezen.py"
handle-as="json"
last-response="{{response}}">
</iron-ajax>
<h1>Menukaart</h1>
<template is="dom-repeat" items="{{response}}">
<div>
<h3>{{item.Gerecht}}</h3>
<p>Ingredienten: {{item.Ingredienten}} <br>
Opmerkingen: {{item.Opmerkingen}}</p>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'menu-kaart',
properties: {
}
</script>
Try modifying your script tag to
<script>
Polymer({
is: 'menu-kaart',
properties: {
response: {
type: Object
}
}
</script>
I'd also recommend you to upgrade your Polymer version to latest 1.x i.e. 1.8 or something relatively newer as Polymer has done a lot of fixes/changes since 1.3.
Lastly, i'll recommend you to read some documentations or some video tutorials to have a better understanding of Polymer

Scroll to bottom automatically using vanilla Javascript/CSS - Polymer

I don't want to use JQuery to do this. Currently, I've created a listview using Polymer. I'm using <template is="dom-repeat"> inside a parent div with a class of list.
The CSS is as follows. As I add new items to the list, I would like the list to scroll to the bottom automatically. Is that possible?
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
position: relative;
overflow: auto;
}
You can set the div's scrollTop to scrollHeight in order to automatically scroll to the bottom:
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => []
}
},
_addItem: function() {
this.push('items', this.items.length+1);
Polymer.RenderStatus.afterNextRender(this, () => {
this.$.list.scrollTop = this.$.list.scrollHeight;
});
}
});
});
<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>
<dom-module id="x-foo">
<template>
<style>
#list {
border: solid 1px gray;
width: 100%;
height: 100px;
overflow: auto;
}
</style>
<button on-tap="_addItem">Add item</button>
<div id="list">
<template is="dom-repeat" items="[[items]]">
<div>[[item]]</div>
</template>
</div>
</template>
</dom-module>
</body>
codepen

Polymer: how to handle a style dynamically

Hey i'm trying to create a simple drag and drop. Is that possible to style an element dynamically. My code will be more explicit:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="wireframe-view">
<template>
<div on-tap="handleTap"
style$=width:{{ width }}px; background-color:red;
>Hello, World</div>
</template>
<script>
Polymer({
is: "wireframe-view",
handleTap: function() {
this.width = 200;
}
});
</script>
This should change the width in my "style" propertie :/
If the property value contains spaces quotes are required.
style$="width:{{ width }}px; background-color:red";
Here is a method for dynamically updating the style based on the value of a bound data attribute.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="conditional-css-example">
<style>
#tapContainer {
width: 100px;
background-color:white;
}
#tapContainer[data-tap-status$="tapped"] {
width: 200px;
background-color:red;
}
</style>
<template>
<div id="tapContainer" data-tap-status$="[[tapStatus]]" on-tap="handleTap">Tap Me!</div>
</template>
<script>
Polymer({
is: "conditional-css-example",
properties: {
tapStatus: String;
},
handleTap: function() {
this.tapStatus='tapped';
}
});
</script>

Uncaught TypeError: this.$.selector.clearSelection is not a function

Here is my layout. Without iron-list it works, but with it it gives me the error
Uncaught TypeError: this.$.selector.clearSelection is not a function
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
<style>
:host {
display: block;
}
paper-material {
background: #FFFFFF;
}
.container {
#apply(--layout-horizontal);
}
.windowItem {
#apply(--layout-horizontal);
}
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<template>
<common-settings-service
id="commonSettings"
url="/board_service/common_settings/"
settings="{{settings}}"/>
<paper-material elevation="1">
<div class="container">
<h3> Настройки обработки</h3>
<h4>Окна</h4>
<div class="list">
<iron-list items="[[settings.timeWindows]]" as="item">
<template>
<div class="item">
Name: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
While I don't know how to show you live demo I've been able to debug a little iron-list code. The problem is with the last line.
clearSelection: function() {
function unselect(item) {
var model = this._getModelFromItem(item);
if (model) {
model[this.selectedAs] = false;
}
}
if (Array.isArray(this.selectedItems)) {
this.selectedItems.forEach(unselect, this);
} else if (this.selectedItem) {
unselect.call(this, this.selectedItem);
}
this.$.selector.clearSelection();
},
Debugging shows that there is really no such function in selector. And this selector is actually array-selector element from polymer library. And it have such function in the source code.
Ok, so I've found the reason for this. They've changed API beetween 1.0.9 and 1.1.1. My polymer was version 1.0.9 and that's why it haven't worked.
I've updated all polymer elements to the latest version and now it works.