I'm having troubles with the following small self contained polymer example for databinding.
My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.
When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.
http://jsbin.com/yawipodayo/1/edit?html,css,js,output
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="consumer" attributes="data">
<template bind="{{data}}">{{}}</template>
</polymer-element>
<polymer-element name="supplier" attributes="data">
<template></template>
<script>
Polymer('supplier', {
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "root">
<template>
<supplier data="{{stuff}}"></supplier>
<consumer data="{{stuff}}"></consumer>
</template>
</polymer-element>
<root>
</root>
</body>
</html>
You have an amount of glitches within your code. I will drop comments around the problems to be fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!-- noscript tags are mandatory for elements not having script declared -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-supplier" attributes="data">
<template></template>
<script>
// As of 0.5 you don’t need to specify name in script
// ⇓⇓⇓⇓
Polymer({
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "my-root" noscript>
<template>
<my-supplier data="{{stuff}}"></my-supplier>
<my-consumer data="{{stuff}}"></my-consumer>
</template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>
The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit
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
Similar to this question, Init polymer attributes before ready(), but not quite the same.
Is it possible to imperatively set attribute of a child element in Polymer before the ready event of that child element fires?
https://plnkr.co/edit/fM7lAflOLWOFuIiE7e9q?p=preview
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="user-profile.html" rel="import">
</head>
<body>
<user-profile></user-profile>
</body>
</html>
user-profile.html:
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="address-card.html" rel="import">
<dom-module id="user-profile">
<template>
<address-card address$="{{address}}"></address-card>
</template>
<script>
Polymer({
is: "user-profile",
properties: {
address: {
type: String,
value: "Pass the value to the child"
}
}
});
</script>
</dom-module>
address-card.html:
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<dom-module id="address-card">
<template>
{{content}}
</template>
<script>
Polymer({
is: "address-card",
properties: {
address: String
},
ready: function () {
alert(this.address);
}
});
</script>
</dom-module>
The element <user-profile>, pass the value {{primaryAddress}} to his child the element <address-card>. The element <user-profile> is a "mediator" that control/assing value to his child.
<dom-module id="user-profile">
<template>
…
<address-card address="{{address}}"></address-card>
</template>
…
properties: {
address: {
type: String,
value: "Pass the value to the child"
}
}
</dom-module>
In this scenario, I use the data binding system to pass the value from the parent to the child.
Linking paths with data bindings
First off, I apologize for the title-gore. I struggled to summarize this issue in a single sentence.
I have a Polymer element. In my element, I wish to display (or simply log to console) the innerHTML of a template element that is a child of (contents of) the element instance.
(Please note that the intent here is to create an element similar to the demo-snippet of iron-demo-helpers.)
Consider the following Polymer element:
<link rel="import" href="../../polymer/polymer.html">
<dom-module id="print-contents-html">
<script>
Polymer({
is: 'print-contents-html',
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
console.log(template.innerHTML);
}
});
</script>
</dom-module>
Very simply, I query for the 'template' element and log its inner HTML.
Now consider the following usage:
<!doctype html>
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./print-contents-html.html">
</head>
<body>
<print-contents-html>
<template>
Hello World
</template>
</print-contents-html>
</body>
</html>
As expected, this results in "Hello World" being logged to the console.
However, I am trying to make use of the 'print-contents-html' element within another Polymer element:
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="./print-contents-html.html">
<dom-module id="simple-demo">
<template>
<print-contents-html>
<template>
Hello World from simple demo
</template>
</print-contents-html>
</template>
<script>
Polymer({
is: 'simple-demo',
});
</script>
</dom-module>
Now if I update the usage to also include an instance of the simple-demo element:
<!doctype html>
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./print-contents-html.html">
<link rel="import" href="./simple-demo.html">
</head>
<body>
<print-contents-html>
<template>
Hello World
</template>
</print-contents-html>
<simple-demo></simple-demo>
</body>
</html>
I would expect to see both "Hello World" and "Hello World from simple demo" logged to the console. However the simple demo message is not logged.
It appears that while the queryDistributedElements() does return the instance of the template element, the innerHTML field is an empty string.
Does anyone know why this is the case? That accessing the content/child template element does not have its innerHTML set?
Secondly, does anyone know of an alternative method through which I can access the innerHTML of the template element that is a content/child of a polymer element?
Kind Regards,
Andrew Butler
This issue is discussed in Polymer's Github repository.
The solution is to add a preserve-content attribute it the inner <template> tag:
<dom-module id="simple-demo">
<template>
<print-contents-html>
<template preserve-content>
Hello World from simple demo
</template>
</print-contents-html>
</template>
...
Then it works!
I am trying to use data binding through attributes on Polymer but I'm just going from failure to failure. I tried many syntax to send my JSON but nothing seems to work... Can I ask a little bit of help to see and understand what i was doing wrong ?
Thanks in advance,
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self Tutorial 02</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="social-nav.html">
</head>
<body>
<social-nav social='[{"twitter":"#cyberwarfighte1"}]'></social-nav>
</body>
</html>
And here is my polymer element :
<polymer-element name="social-nav" attributes="social">
<template>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<div class="social-icons">
{{social}}
<template repeat="{{k in social}}">
{{k}}
</template>
</div>
</template>
<script>
Polymer('social-nav', {
});
</script>
</polymer-element>
Well, I found a way to solve my problem by myself.
For anyone who have the same problem than me, the answer is that your attribute need to be declared as an object inside the polymer element.
Here is my fixed code :
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<polymer-element name="social-nav" attributes="social">
<template>
<div class="social-icons">
<template repeat="{{k in social}}">
<a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
</template>
</div>
</template>
<script>
Polymer('social-nav', {
created: function(){
this.social = []; // <- HERE !!
}
});
</script>
</polymer-element>
And my fixed element call with the good JSON
<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'}, {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>
Hope it can help someone :)
I am getting the following error:
Uncaught ReferenceError: Polymer is not defined
when I click on the link on the following element:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
</head>
<body>
<my-element id="my_element"></my-element>
</body>
</html>
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
Is this a Polymer bug or am I doing something wrong?
http://jsbin.com/cuxep/1/edit?html,output
As #badsyntax points out above, it looks like event.preventDefault() doesn't work well for the tap event. Changing to on-click seems to solve the problem of preventing a navigation though.
The error that you saw:
Uncaught ReferenceError: Polymer is not defined
That seems to be an artifact of malformed HTML, I suspect this was causing a race condition between loading polymer.html and your <script> element being executed. After cleaning up the HTML I was no longer able to reproduce it.
Here's a jsbin that works as I believe you intend: http://jsbin.com/boweliwe/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>console.clear()</script>
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<my-element></my-element>
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
</body>
</html>