I need to bind a datalist to a paper-input element, something like we have here HTML5 DataList Example. It does not work as the example shows, can someone please help. Thank you.
From your question, I don't believe a paper-input is what you are looking for. If you look at the documentation at The Polymer Project it describes the paper-input as "paper-input is a single-line text field for user input".
What you might be looking for is the paper-dropdown-menu (<-- look at ths link) with a core-menu as the element you are going to bind your data to.
I included a skeleton of how you would bind your data. Remember that you still need to add all the references to the Polymer elements, and polyfills.
<template is="auto-binding">
<!-- other content -->
<paper-dropdown-menu>
<paper-dropdown class="dropdown colored">
<core-menu class="menu">
<template repeat="{{countries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.countries= [
'Mexico',
'United States',
'Canada'
];
</script>
As recommended by this reply, you could wrap paper-input-decorator with input and datalist inside.
You would have the same result as with paper-input but more explicit and therefore more customizable.
Related
I have a list of paper-checkbox elements inside a core-selector like this
<core-selector id="moduleSelector" multi="true" valueattr="label" notap?="{{true}}" on-core-select="{{selectionSelect}}>
<template repeat="{{modules in moduleslist}}">
<core-label horizontal layout>
<paper-checkbox id="modulecheckbox" checked="{{modules.checked}}" label="{{modules.pname}}"
on-change={{checkboxHandler}} noink></paper-checkbox>
</core-label>
<br>
</template>
</core-selector>
I wish to get the array of selected paper-checkbox labels using this.$.moduleSelector.selected but i get only some index values which are not accurate as per the module list indexes.I need to get the label names.
If I use paper-items instead of checkboxes like below
<core-selector id="moduleSelector" valueattr="label" multi="true" notap?="{{false}}">
<template repeat="{{modules in moduleslist}}">
<paper-item label="{{modules}}"></paper-item>
</template>
</core-selector>
then I can get the proper array values using this.$.moduleSelector.selected
Any help will be appreciated.
You should switch to Polymer 1.0. Polymer 0.5 is a very old and unsupported version. Polymer 1.0 is also much easier to use.
update 1: found this issue with pull request which seems to be addressing this issue in Polymer.
update 2: Decided to restructure my layout based on the Polymer Starter Kit which uses page.js instead of app-router, and seems to work well, although they don't use paper-item in paper-menu but instead use custom anchor elements.
Search every bit of documentation but I can't find this (although there is another issue on stackoverflow with almost the same title, not same thing)
TLDR: I need to have to whole paper-item clickable to the link. Not just the text itself. See image below for clarity and here is the live code.
.
I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.
When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...
There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?
<paper-menu class="list">
<paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
<paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>
I checked documentation on paper-item, paper-menu and others but those never use an example with a link.
IMO, the most clean way is to just drop the links altogether and just add on-tap event.
(You can also use dom-repeat for your menu)
<paper-menu class="list">
<paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
<paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>
I'm assuming your are using <a> tags because of app-router.
From app-router doc:
go(path, options) - You can call the router from Javascript to navigate imperatively.
Then you can simple write your own on-tab handler and use custom attribute (mypath) on each <paper-item>
Polymer({
is: 'your-menu',
menuSelected: function (e) {
var mypath = e.currentTarget.getAttribute('mypath');
document.querySelector('app-router').go(mypath);
},
})();
Add class="flex" to each of your anchor tags.
I'm not sure if the following is possible with a "computed" and a dom-repeat template. I was binding with child and parent properties prior to .9/.8/1.0
<template is="dom-repeat" as="agreementTypeCount" index-as="agreementTypeCountI" items="{{agreementTypeCounts}}">
{{agreementTypeCount.type}}
</template>
Are there any plans to implement string concatenation? It would make life so much easier!
It's currently on the roadmap. However you can also use computed bindings for this.
<template is="dom-repeat" as="agreementTypeCount" index-as="agreementTypeCountI" items="{{agreementTypeCounts}}">
<a href$="{{computeAgreementUrl(style_domain, selectedCountryCode, agreementTypeCount.type)}}">{{agreementTypeCount.type}}</a>
</template>
and then declare it
Polymer({
...
computeAgreementUrl(styleDomain, countryCode, type){
return "/"+styleDomain+"/agreements/#/table/country/"+countryCode+"/type/"+type+"/sort/start-desc/size/10/page/1/";
}
})
Please take note of the $ character next to href. It is recommended that you use attribute binding ($=) to native elements' attributes.
We're developing a data visualization library using Polymer, and I must say I'm impressed with what Polymer lets you do. We do have a question, though...
First: here's an example snippet of code showing a data visualization:
<template is="auto-binding">
<our-loaddata url="data/data.csv" data="{{data}}"></our-loaddata>
<our-scatterplot data="{{data}}"></our-scatterplot>
<our-barchart data="{{data}}" dimension="weight"></our-barchart>
<our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
</template>
The our-loaddata loads the dataset from a file data/data.csv, performs some transformations (e.g. converting strings to numbers, calculating distributions, ...) and makes it available through {{data}} to the our-scatterplot, our-barchart and our-histogram. However, I'm not completely satisfied with the setup. Conceptually, the our-loaddata is different from the other three, and should precede them. As an alternative, we have also tried the following (renaming loaddata to app and nesting all visuals within the app):
<template is="auto-binding">
<our-app url="data/data.csv" data="{{data}}">
<our-scatterplot data="{{data}}"></our-scatterplot>
<our-barchart data="{{data}}" dimension="weight"></our-barchart>
<our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
</our-app>
</template>
Although this also works, we noticed that it doesn't matter if we close the </our-app> element before or after all the visual elements.
What would be the most canonical way to handle this in Polymer? What is the difference between the approaches that I showed here?
you could use the conditional template to check if data is present and then send the other elements to the dom if true or show a loader if false. (careful getting to used to this i don't think it is currently in 0.8. sad IMO i <3 it)
<template is="auto-binding">
<our-loaddata url="data/data.csv" data="{{data}}"></our-loaddata>
<template if="{{data}}">
<our-scatterplot data="{{data}}"></our-scatterplot>
<our-barchart data="{{data}}" dimension="weight"></our-barchart>
<our-histogram data="{{data}}" dimension="weight" binSize=10></our-histogram>
</template>
<template if="{{!data}}">
<pretty-loadingscreen></pretty-loadingscreen>
</template>
</template>
the would give you seperation of elements you were looking for.
Either I am doing something horribly wrong or Polymer just doesn't like me. See following:
<polymer-element name="menu-paper-ui" noscript>
<template>
<paper-dialog heading="Dialog" transition="paper-dialog-transition-bottom">
[ .. ]
</paper-dialog>
<paper-button label="Dialog Bottom" on-tap="{{toggleDialog}}"></paper-button>
</template>
<script>
Polymer('menu-paper-ui', {
toggleDialog : function() {
var dialog = document.querySelector('paper-dialog');
console.log(dialog); //returns null
dialog.toggle();
}
})
</script>
</polymer-element>
Now, I have my reasons to use querySelector. So, if someone can tell me whats going wrong that will be great!
This question is nearly identical to Using querySelector to find nested elements inside a Polymer template returns null.
The short answer is that elements in a polymer-element's template are put into the ShadowDOM of that element, are not not visible to the anything outside of that element. This is so that you can control styling more easily, and element IDs are scoped.
You can either give the dialog an id and use Polymer's automatic node finding, or use this.shadowRoot.querySelector('paper-dialog').
The Problem is that you can not access the shadow DOM inside a custom element with document.querySelector. See my answer to a similar question.