I seem to have misplaced several dozen IQ points....
I'm trying to catch an iron-items-changed event from a paper-dropdown-menu from the host. For the life of me I can't figure out (or find an example of) the syntax.
<paper-listbox .... onclick="doSomething()">
works fine. But oniron-items-changed doesn't. Nor does on-iron-items-changed. Nor onIronItemsChanged. Or any other variation of the event name that I can think of.
Anyway, can someone help? Please???
UPDATE:
I'm beginning to think the problem is that it's an event bubbling issue. I tried moving the attribute up a level to the paper-dropdown-menu element, but that didn't help. Any ideas? Here's the HTML that's being delivered to the browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link href="/Content/site.css" rel="stylesheet"/>
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
#pageContent {
margin: 20px;
}
</style>
</head>
<body unresolved>
<app-header-layout>
<app-header slot="header" fixed condenses shadow effects="waterfall">
<app-toolbar>
<div main-title>FTI Calculation Editor</div>
</app-toolbar>
</app-header>
<div id="pageContent">
<paper-dropdown-menu label="Master" id="master" on-selected-item-changed="doSomething" >
<paper-listbox slot="dropdown-content" >
<paper-item>Test One</paper-item>
<paper-item>Test Three</paper-item>
<paper-item>Test Two</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<p></p>
<paper-dropdown-menu label="Child" id="child">
<paper-listbox slot="dropdown-content">
<paper-item>C 1-1</paper-item>
<paper-item>C 1-2</paper-item>
<paper-item>C 1-3</paper-item>
<paper-item>C 2</paper-item>
<paper-item>C 3-1</paper-item>
<paper-item>C 3-3</paper-item>
<paper-item>C 3-4</paper-item>
<paper-item>C-3-2</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</app-header-layout>
<script>
function doSomething(e) {
alert("got here");
}
</script>
</body>
</html>
Probably obvious, but what I'm ultimately trying to achieve is to filter the second dropdown based on the selection in the first. If somebody knows a better/easier way to achieve that, I'd be delighted to know....
Just look into documentation. It points you to a good path. As you can see in documentation, there is -on-iron-items-changed so problem must be somewhere else.
You can't call functions with () at the end. You need to point to some function and not actually call it. So rewrite your code to:
<paper-listbox .... on-iron-items-changed="doSomething">
The way you get the event with onclick="domsomething()" does something because you are not using the actual Polymer syntax, that's the "old" HTML way to catch the click even. But you might not want that, at least because it's not the best when it comes to touch devices support (there's on-tap for tat).
But in your case, now, the other answer was pretty close. First of all you don't need to call a function, you need to pass a name that can be used by the paper-listbox element as a callback.
The only difference is that you are not interested in the event triggered when the items are changed. That would be when the list changes. I am guessing that you are interested in the event triggered when the selected one changes. So on that page you can see that there's an event called selected-item-changed. That would mean that that you can use the on-selected-item-changed attribute to define a callback for that event.
So please try:
<paper-listbox .... on-iron-items-changed="doSomething">
You doSomething method will get one parameter, the event object.
Related
I was looking for json format icon from the polymer iron icons list which is not available
something similar to http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png
I am tried below workaround but it didnt work either
<paper-icon-button id="json">{}</paper-icon-button>
https://codepen.io/nagasai/pen/rwqYYZ
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<div class="toolbar">
</head>
<body>
<paper-icon-button id="json">{}</paper-icon-button>
<paper-icon-button id="save" icon="icons:save"></paper-icon-button>
</body>
<paper-icon-button> has a src property to specify the URL of the desired image. You could even specify the .png URL you indicated in the question, like this:
<paper-icon-button src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png"></paper-icon-button>
codepen
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
Can't see the value inside the input and the menu has horizontal scrollbars, even with small words.
Have you experienced the same issue and found a solution?
I opened a thread on github project if anyone interested.
Here is some code I used (this code is a part of a larger module and I use webcomponents.js to make it work):
<dom-module id="test-form">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<template>
<paper-dropdown-menu label="Center">
<paper-menu class="dropdown-content">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "test-form"
});
</script>
</dom-module>
[Edited to remove parts about wc being supported by polymer on IE10, since accepted answer changed]
Your component name must include a dash.
Polymer is based on http://webcomponents.org/. You can see that IE and Safari do not support it. EDGE will probably support it, but don't hold your breath.
Say I've got one polymer app test-app, one regular div div-a, and one polymer element page-a.
Now I'm trying to build a animated-pages, which contains div-a and page-a
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../page-a/page-a.html">
<polymer-element name="test-app" flex vertical layout>
<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>
<section name="page-a">
<page-a cross-fade></page-a>
</section>
</core-animated-pages>
</template>
<script src="./test-app.js"></script>
</polymer-element>
The problem is: when performing the transition, the animation on div-a works fine, but the one on page-a doesnot work. Instead of fading in, the page-a just suddenly appears.
Another strange point is: if I change transitions="cross-fade" into transitions="cross-fade-all", and remove other cross-fade defined on div and page-a, both transitions work find.
Any idea?
Cross-fade doesn't work directly on elements that have overflow: hidden set.
As far as I can tell from the documentation here and here, the following should be right. But it's not working. I get no errors. My page just says "test test" (You'll see why in the code). What is wrong?
NOTE I had this working fine with core-ajax directly in a single blog entry, so I know my data is fine, etc
slog-entry.html this is the element for each entry in my demo blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../core-ajax/core-ajax.html" rel="import">
<polymer-element name="slog-entry" noscript>
<template>
<h1>{{entry.Title}}</h1>
<p>{{entry.Text}}</p>
<span>{{entry.timestamp}}</span>
</template>
</polymer-element>
slog-entries.html this is the element for the collection of entries in my blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../slog-entry/slog-entry.html" rel="import">
<polymer-element name="slog-entries" noscript>
<template>
<core-ajax auto
url="https://<server>/entries.json"
response="{{entries}}">
</core-ajax>
test
<template repeat="{{entry in entries}}">
<slog-entry bind="{{entry}}"></slog-entry>
</template>
</template>
</polymer-element>
slog.html this is the index
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Status Log 0.1b</title>
<script src="templates/platform/platform.js"></script>
<link href="templates/slog-entries/slog-entries.html" rel="import">
<link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
test
<slog-entries></slog-entries>
</body>
</html>
UPDATE Here is what the DOM looks like:
Your syntax bind="{{entry}}" doesn't do what I suspect you want it to do.
Polymer binding uses a syntax like this <name of thing to bind to>="{{<source value>}}".
Now, in order to have a name of thing to bind to, elements must publish those names.
So, slog-entry has to look like this:
<polymer-element name="slog-entry" attributes="entry" noscript>
The attributes="entry" bit on the element causes slog-entry to accept bindings to property entry (this is what we call publishing).
Now your repeat can look like this:
<template repeat="{{entry in entries}}">
<slog-entry entry="{{entry}}"></slog-entry>
</template>
We are telling the system to bind the entry property of each slog-entry to the entry value at each repeat.