I want to binding a URL string like this:
like
but it not work.
what should i do?
<dom-module id="list-view">
<template id="app" testattr$="{{value}}" >
<iron-list id="list" items="{{data}}" as="item">
<template>
<a href="{{item.id}}" >
<span>[[item.name]]</span>
</a>
</template>
</iron-list>
</template>
<script>
Polymer({
is: 'list-view',
ready: function() {
var _self = this;
$.get('data/persons.json',function(data){
_self.data =
});
});
});
</script>
</dom-module>
I use iron-list element to repeat the data to list. object --> [{"id":"001","name":"adisak"},{"id":"002","name":"adisak2"},{"id":"003","name":"adisak3"}] then i use iron-list to binding data in to list of element
You can compute your URL with a method, like this:
<dom-module id="list-view">
<template id="app" testattr$="{{value}}" >
<iron-list id="list" items="{{data}}" as="item">
<template>
<a href="{{_computeUrl(item.id)}}" >
<span>[[item.name]]</span>
</a>
</template>
</iron-list>
</template>
<script>
Polymer({
is: 'list-view',
ready: function() {
var _self = this;
$.get('data/persons.json',function(data){
_self.data = data;
});
},
_computeUrl: function(id) {
return '/myurl/' + id;
}
});
</script>
Related
Assume I have two sibling elements, and <element-b> fires an event. How does <element-a> listen to the event without having to add imperative code to the parent?
<dom-module id="parent-element">
<element-a></element-a>
<element-b></element-b>
</dom-module>
where <element-a> and <element-b> are:
<dom-module id="element-a">
<template>
<style include="shared-styles">
</style>
</template>
<script>
Polymer({
is: 'element-a',
listeners: {
'element-b': 'handleEvent',
},
ready: function() {
console.log('fired from element a')
this.fire('element-a', {employee: ''});
},
handleEvent: function (e) {
console.log('received element b event', e)
}
});
</script>
</dom-module>
<dom-module id="element-b">
<template>
<style include="shared-styles">
</style>
</template>
<script>
Polymer({
is: 'element-b',
listeners: {
'element-a': 'handleEvent',
},
ready: function() {
console.log('fired from element b')
this.fire('element-b', {employee: ''});
},
handleEvent: function (e) {
console.log('received element a event', e)
}
});
</script>
Thanks!
You could use <iron-signals> for that.
Add an <iron-signals> listener in one element:
// element-b
<iron-signals on-iron-signal-element-a="_onSignalElementA"></iron-signals>
_onSignalElementA: function(e) {
const newDate = e.detail;
...
}
...and fire an iron-signal event (with data) in the other:
// element-a
this.fire('iron-signal', {name: 'element-a', data: new Date()});
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
Polymer({
is: 'element-a',
_onClick: function() {
this.fire('iron-signal', {name: 'element-a', data: new Date()});
}
});
Polymer({
is: 'element-b',
_onSignalElementA: function(e) {
this._message = `b received: ${e.detail}`;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.11.0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-signals/iron-signals.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<element-a></element-a>
<element-b></element-b>
</template>
</dom-module>
<dom-module id="element-a">
<template>
<button on-tap="_onClick">Fire event</button>
</template>
</dom-module>
<dom-module id="element-b">
<template>
<iron-signals on-iron-signal-element-a="_onSignalElementA"></iron-signals>
<div>[[_message]]</div>
</template>
</dom-module>
</body>
codepen
I have the following template:
<template is="dom-repeat" items="{{myItems}}">
<template is="dom-if" if="{{_shouldHaveLink(item)}}">
Link
</template>
</template>
Now, if the link was not wrapped in a dom-if, I can see the item which was pressed with:
_linkTapped: function (oEvent) {
console.log('Item link tapped:', oEvent.model.get('item'));
}
But inside the dom-if I can't. Seems like item is now out of scope. How can I get it?
This is a known bug with Polymer's dom-repeat yet to be solved, but there's a simple workaround in this scenario.
Since the dom-if template without restamp simply hides its contents when the if condition is false (as an optimization), you could simulate the original behavior while avoiding the dom-if-related bug by replacing the template with a hidden attribute based on the same condition negated:
<div hidden$="{{!_shouldHaveLink(item)}}">
Link
</div>
or:
Link
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => [
{ name: 'google', link: 'http://www.google.com' },
{ name: 'facebook' },
{ name: 'twitter', link: 'http://www.twitter.com' },
]
}
},
_hasNoLink: function(item) {
return !item.link;
},
_linkTapped: function(e) {
console.log(e.model.item);
// for demo only...
e.preventDefault();
}
});
});
<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>
<div>Facebook anchor is hidden because it has no link</div>
<template is="dom-repeat" items="[[items]]">
<a href="#"
hidden$="{{_hasNoLink(item)}}"
on-tap="_linkTapped">[[item.name]]</a>
</template>
</template>
</dom-module>
</body>
codepen
And as #DocDude suggested, another alternative is to use <dom-repeat>.modelForElement(e.target) if you have a reference to the <dom-repeat>:
//template
<template id="repeater" is="dom-repeat" items="[[items]]">
// script
_linkTapped: function(e) {
const m = this.$.repeater.modelForElement(e.target);
console.log(m.item);
...
}
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => [
{ name: 'google', link: 'http://www.google.com' },
{ name: 'facebook' },
{ name: 'twitter', link: 'http://www.twitter.com' },
]
}
},
_hasLink: function(item) {
return item.link;
},
_linkTapped: function(e) {
const m = this.$.repeater.modelForElement(e.target);
console.log(m.item);
// for demo only...
e.preventDefault();
}
});
});
<head>
<base href="https://polygit.org/polymer+1.3.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>
<div>Facebook anchor is hidden because it has no link</div>
<template id="repeater" is="dom-repeat" items="[[items]]">
<template is="dom-if" if="{{_hasLink(item)}}">
[[item.name]]
</template>
</template>
</template>
</dom-module>
</body>
codepen
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>
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