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>
Related
Not sure what I'm doing wrong, but I expect to see the length of an array I've initialized. However, I see an empty value instead, when I access the data at 'mediator' level.
This code is also in a jsbin: http://jsbin.com/wujaruy/edit?html,output
<!doctype html>
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="x-container">
<template>
<!-- doesn't show the expected value of '3' -->
<div>In container; # of items:[[listItems.length]]</div>
<x-list listItems="{{listItems}}"></x-list>
</template>
<script>
Polymer({
is: 'x-container'
});
</script>
</dom-module>
<dom-module id="x-list">
<template>
<div>In x-list 1; # of items:[[listItems.length]]</div>
</template>
<script>
Polymer({
is: 'x-list',
properties: {
listItems: {type: Array, value: [1,2,3], notify: true}
}});
</script>
</dom-module>
<x-container listItems="{{listItems}}"></x-container >
</body>
Figured it out; I got bitten by the upper-case issue. Changing
<x-list listItems="{{listItems}}"></x-list>
to
<x-list list-items="{{listItems}}"></x-list>
fixes the issue
I am trying to implement a custom filter using Polymer v1.7.0 currently. However, it does not work at all; when I try to use a filter the output is just the raw expression, unprocessed.
I have tried it like it's done here: https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/filters/using-custom-filters.html but using this code:
<div id="toFixed">{{10.123456789 | toFixed(2)}}</div>
only results in
{{10.123456789 | toFixed(2)}} in the resulting document.
Is my linked source outdated? I couldn't find any valuable information in the Polymer docs so a nudge into the right the direction is appreciated.
You don't need pipe in Polymer 1.x to achieve this. You can directly call an function and pass it the value that you want to
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
<template>
{{format(myVal)}}
<br>{{format("hello")}}
</template>
</dom-module>
<script>
Polymer({
is: "my-element",
properties: {
myVal: {
type: String,
value: "Hi"
}
},
format: function(input) {
return input + " John";
}
});
</script>
<my-element></my-element>
I have used this code in vaadin html file. But output is nothing.
Code refrence: https://vaadin.com/charts-for-polymer
Please let me know how to correct and implement in my vaadin design.
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-charts/3.0.0-alpha9/vaadin-
charts.html">
</head>
<body>
<template is="dom-bind" id="app">
<vaadin-pie-chart id="pie-with-legend">
<title>Revenue by industry</title>
<subtitle>2015</subtitle>
<tooltip point-format="<b>{point.percentage:.1f}%</b>">
</tooltip>
<plot-options>
<pie allow-point-select="true" show-in-legend="true"cursor="pointer">
<data-labels enabled="true"format="{point.name}: {point.y:.1f} M€"></data-labels>
</pie>
</plot-options>
<data-series name="Revenue" data="[[seriesData]]"></data-series>
</vaadin-pie-chart>
<my-data-source data="{{seriesData}}"></my-data-source>
</template>
<dom-module id="my-data-source">
<script>
Polymer({
is: "my-data-source",
properties: {
data: {
type: Array,
notify: true,
value: [
["Aerospace", 53.0],
["Medical", 53.6],
["Agriculture", 25.6],
["Automotive", 17.0],
["Consumers", 12.4],
["Subsidies", 1.4]]
}
}});
</script>
</dom-module>
</body>
</html>
Your code works perfectly in chrome, yet it fails on firefox
(console: Polymer not defined).
What you need to do is, wrap the polymer code in a check like:
addEventListener('WebComponentsReady', function() {
Polymer({
is: "my-data-source",
....
see working example here: https://jsbin.com/tifafepefi/edit?html,output
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>
I've been trying to use Polymer for a project I'm working on. And although I enjoyed it quite a lot so far, I ran into a problem I just can't solve.
I dumped it down to a simple example. Basically it's just a list element (item-list) that contains item elements (item-card) and i want to parse the items position to the element via the attribute pos. But for some reason the items attribute is allways undefined! Is this because the attribute is bound to the variable i, which dies after the template repeat? If so, how do I work around it? Is there a different approach I should be using here?
SOLUTION: You can find the solution by reading through all the comments, but to sum it up: apperantly there was a timing issue and the attribute wasn't ready at the ready callback. But I found out about the domReady callback (polymer lifecycle documentation). Using domReady it works just fine! Thanks to Günter Zöchbauer for the help!
This is the item-list.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="item-card.html">
<polymer-element name="item-list">
<template>
<style>
</style>
<template repeat="{{values, i in data.data}}">
<item-card pos="{{i}}"></item-card>
</template>
</template>
<script>
Polymer({
created: function()
{
this.num = 123456;
this.data = { "data":
[
{
"value":999
},
{
"value":666
},
{
"value":555
},
{
"value":222
}
]
};
}
});
</script>
</polymer-element>
This is the item-card.html
<link rel="import" href="components/polymer/polymer.html">
<polymer-element name="item-card" attributes="pos">
<template>
<style>
</style>
</template>
<script>
Polymer({
ready: function()
{
console.log("ready: " + this.pos);
}
});
</script>
</polymer-element>
I didn't bother putting the index.html in, since it just containts one item-list element.
Thanks alot!!
I think you need a pos field in <item-card> in addition to the attributes="pos" declaration.
The repeated element also references the bound model which can be accessed like querySelector('item-card').templateInstance.model property.
See https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286 for an example.
Info:
According to the comments it turned out to be a timing issue. The value wasn't yet assigned when the ready callback was called but using domReady worked.