Probably something super easy, but I seem unable to find the answer.
I would like to replace the properties in the <content> section. But I don't understand how to push the title (with content hola) to the <content> section.
demo-app.html
<dom-module id="demo-app">
<template>
<style>
:host {
display: block;
}
</style>
<my-el>
[[title]] or {{title}}
</my-el>
</template>
...
my-el.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-el">
<template>
<style>
:host {
display: block;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: 'my-el',
properties: {
title: {
type: String,
value: 'hola',
},
}
})
</script>
</dom-module>
PS:
I'm 99% sure there are some docs that I'm missing... Any link is welcome :-P
That's technically possible if <demo-app> had its own title property that you bound to <my-el>.title like this:
<dom-module id="demo-app">
<template>
<my-el title="{{title}}">
[[title]] or {{title}}
</my-el>
...
HTMLImports.whenReady(() => {
Polymer({
is: 'my-el',
properties: {
title: {
type: String,
value: 'Hello world!',
notify: true
}
}
});
Polymer({
is: 'demo-app'
});
});
<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>
<demo-app></demo-app>
<dom-module id="demo-app">
<template>
<style>
h1 {
color: blue;
}
</style>
<my-el title="{{title}}">
<h1>[[title]]</h1>
</my-el>
</template>
</dom-module>
<dom-module id="my-el">
<template>
<content></content>
<section>
<input type="text" value="{{title::input}}">
</section>
</template>
</dom-module>
</body>
codepen
Related
I'm using Polymer and would like to be able get the value of a custom CSS property in JavaScript.
I thought I'd be able to do it using this.customStyle["--my-style"] but this was not the case (the result is undefined). You can see the element below:
<dom-module id="my-element">
<template>
</style>
<div>Some Content</div>
</template>
<script>
Polymer({
is: "my-element",
attached: function () {
console.log(this.customStyles["--my-style"])
}
})
</script>
</dom-module>
Is there anyway I can access this custom style from within the JavaScript - I'm able to set the value, just not retrieve it.
customStyles is an empty object which you populate while updating the properties. If you need to retrieve any value Polymer has provided another api getComputedStyleValue.
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id='computed-style'>
<template>
<style>
:host {
--my-style: red;
}
.test {
color: var(--my-style);
}
</style>
<div class='test' on-tap='getStyle'>Hello</div>
</template>
</dom-module>
<script>
Polymer({
is: 'computed-style',
getStyle: function() {
console.log(this.getComputedStyleValue('--my-style'));
}
})
</script>
<computed-style></computed-style>
<template is="dom-repeat" items="{{days}}" as="item">
<td class="d">{{formatDay(item)}}</td>
<template is="dom-if" if="{{ lastDayOfWeek(item) }}">
</template>
</template>
In this case, lastDayOfWeek(item) is not getting the value which dom-repeat has. How to propagate item down to dom-if?
Your code looks right to me:
https://jsbin.com/pebidacaku/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/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>
<template is="dom-repeat" items="{{days}}">
<span>{{item}}</span>
<template is="dom-if" if="{{isThirdDay(item)}}">
<span>*</span>
</template>
<br>
</template>
</template>
<script>
Polymer({
is: 'x-foo',
properties: {
days: {
type: Array,
value: function() {
return [
'1/2/2016',
'2/4/2016',
'3/6/2016',
'4/8/2016'
]
}
}
},
isThirdDay: function(day) {
return day === this.days[2];
}
});
</script>
</dom-module>
</body>
</html>
The reason item is different for your inner template is possibly caused by formatDay modifying item before lastDayOfWeek gets to it, as demonstrated here:
https://jsbin.com/himulegicu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/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>
<template is="dom-repeat" items="{{days}}">
<span>{{formatDay(item)}}</span>
<template is="dom-if" if="{{isThirdDay(item)}}">
<span>*</span>
</template>
<br>
</template>
</template>
<script>
Polymer({
is: 'x-foo',
properties: {
days: {
type: Array,
value: function() {
return [{
value: '1/2/2016'
}, {
value: '2/4/2016'
}, {
value: '3/6/2016'
}, {
value: '4/8/2016'
}]
}
}
},
formatDay: function(day) {
if (day.value === this.days[2].value) {
day.value = 'changed!!';
}
return day.value;
},
isThirdDay: function(day) {
return day.value === '3/6/2016';
}
});
</script>
</dom-module>
</body>
</html>
I've seen a few answer to this but for some reason I can't wrap my head around why this isn't working. I'm trying to get the values of a JSON array and output them in custom HTML elements in my template.
Polymer Element:
<polymer-element name="graph-optionsLoad">
<template>
<core-ajax auto url="/getDataHeaders"
handleAs="json" response="{{headerList}}"></core-ajax>
<div>TEST</div>
<ul>
<template repeat="{{h in headerList}}">
<li> {{h}}</li>
</template>
</ul>
</template>
<script>
Polymer( "graph-optionsLoad", {
headerListChanged: function(oldValue) {
console.log(this.headerList);
// this.headers;
}
});
</script>
</polymer-element>
JSON:
{
"headers": [
"MakeSpawnFish",
"MakeEndGame",
"MakeModeChange",
"MakeConnectComponent",
"MakeCircuitCreated",
"MakeStartGame",
"MakeSnapshot",
"MakeResetBoard",
"MakeAddComponent",
"MakeCaptureFish",
"MakeRemoveComponent",
"MakeDisconnectComponent"
]
}
HTML
<!DOCTYPE html>
<html>
<head>
<script src="/static/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/static/bower_components/my-elements/graph-optionsLoad.html">
<link rel="import" href="/static/bower_components/core-ajax/core-ajax.html">
<!-- <link rel="import" href="/static/greeting-tag.html"> -->
</head>
<body>
<graph-optionsLoad></graph-optionsLoad>
<script>
</script>
</body>
</html>
All that seems to show up on the page is the "TEST" and the empty <ul></ul>
I don't know if this helps. But I'll put it up just in case it helps someone else. In Polymer 1.0:
<dom-module id="graph-optionsload">
<template>
<iron-ajax auto
url="/getDataHeaders"
handle-as="json"
last-response="{{headerList}}"
on-response="listChanged"></iron-ajax>
<div>TEST</div>
<ul>
<template is="dom-repeat" items="[[headerList]]" as="[[h]]">
<li>[[h]]</li>
</template>
</ul>
</template>
<script>
Polymer({
id: "graph-optionsload",
properties: {
headerList: {type: Array, value: ()=>{return []}, notify: true}
},
listChanged: function(oldValue) {
console.log(this.headerList);
// this.headers;
}
});
</script>
</dom-module>
That should work for you.
In order to test some polymer custom elements of mine in isolation, I would like to be able to pass in js object literals for some attributes that would ordinarily come from parent elements. I'm having trouble figuring out how to do this. See this example code. If it were working as I would like it to, it would display a 1 and a 2 next to each other, but it doesn't work.
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="my-element" attributes="stuff">
<template>
{{stuff.one}} {{stuff.two}}
</template>
<script>
Polymer('my-element', {
ready: function () {
console.log(this.stuff);
}
});
</script>
</polymer-element>
<my-element stuff='{"one": 1, "two": 2}'></my-element>
Polymer only converts the JSON text into an object, if you initialize the stuff property with an empty hash:
Polymer('my-element', {
stuff: {},
ready: function () {
console.log(this.stuff);
}
});
Without this, the stuff attribute is passed in as a string. The same goes for arrays.
Another way to do it:
myElem.html
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="my-element">
<template>
<div> {{stuff.one}} {{stuff.two}} </div>
</template>
<script>
Polymer({
is: "my-element",
properties: {
stuff:{
type: Object,
value: {"one":"default_1","two":"default_2"}
}
}
});
</script>
</dom-module>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="myElem.html">
</head>
<body>
<my-element></my-element>
<my-element stuff={"one":"1","two":"2"}></my-element>
</body>
</html>
Result
default_1 default_2
1 2
index.html
...
<body unresolved fullbleed layout vertical>
<my-post info='{"name":"Alex","id":"123"}' posts='[{"id":"456","name":"post1"},{"id":"789","name":"post2"}]'></my-post>
</body>
...
my-post.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="my-post" attributes="info posts" >
<template>
{{info.name}}
<template repeat="{{post in posts}}">
<br> {{post.id}} - {{post.name}}
</template>
</template>
<script>
(function () {
Polymer({
ready: function() {
this.info=JSON.parse(this.info)
this.posts=JSON.parse(this.posts)
},
});
})();
</script>
</polymer-element>
I have successfully used core-ajax to pass a json object, but I want to write a custom element that can pass simple values. Here is what I have, but it is not working.
testOutput element
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="testOutput">
<template>
This doesn't do anything but output a value.
</template>
<script>
Polymer('testOutput', {
response: "MyValue"
});
</script>
</polymer-element>
testInput element
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="testInput" noscript attributes="input">
<template>
Here is the value from the other element:
<h1>{{input}}</h1>
</template>
</polymer-element>
index.html
<testOutput response="{{output}}"></testOutput>
<testInput input="{{output}}"></testInput>
output
This doesn't do anything but output a value.
Here is the value from the other element:
I simply had to publish the response variable in my output element. You can do this by including it in the attributes or using the publish function.
<polymer-element name="testOutput" attributes="response">
or
Polymer('testOutput', {
publish: {
response: "MyValue"
}
});
I think your response should be a function.
Polymer('testOutput', {
response: function() { return "MyValue" };
});
I think there are two ways to do it
First way
You need to create element where you want to get data:
<polymer-element name="first-element">
<template>
</template>
<script>
Polymer('first-element',{
needPass: 'I am Passed'
});
</script>
</polymer-element>
After you need to get first element using querySelector and get data
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="second-element">
<template>
<style>
:host{
width: 100%;
height: 100%;
}
</style>
<h1>{{passed}}</h1>
</template>
<script>
Polymer('second-element',{
passed: '',
ready: function(){
var first_el = document.querySelector('first-element');
this.passed = first_el.needPass;
}
});
</script>
</polymer-element>
Than call the elements into your index
<first-element></first-element>
<second-element></second-element>
Second way
Or you can call first element into your second element
first element:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="first-element" attributes="needPass">
<template>
</template>
<script>
Polymer('first-element',{
needPass: 'I am Passed'
});
</script>
</polymer-element>
second element
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="first-element.html">
<polymer-element name="second-element">
<template>
<style>
:host{
width: 100%;
height: 100%;
}
</style>
<first-element needPass="{{needPass}}"></first-element>
<h1>{{needPass}}</h1>
</template>
<script>
Polymer('second-element',{
ready: function(){
}
});
</script>
</polymer-element>
and call into index only second element
I hope it help for you.
PS: I tested the code.