Is something like this posible outside a Polymer element?
I want to be able to get data from a json and insert it as menu items, but what works fine inside a polymer element won't work here. Is there something I'm missing or this is impossible?
<html>
<head>
[...]
</head>
<body>
<core-toolbar>
<paper-menu-button id="dropDownMenu">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item>Escritorio</paper-item>
<template is="auto-binding">
<custom-item-list id="list" items={{items}} jsonurl="postsESTADO CIVIL.json"></custom-item-list>
<hr />
<template is="auto-binding" repeat="{{item in items}}">
<paper-item>
{{item.name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
</template>
<paper-item>Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
</body>
</html>
EDIT
I'm trying a new approach, as seen in the Polymer Single Page Application.
So far I'm still stuck. This is how my code looks right now:
<paper-menu-button id="dropDownMenu" style="display:none;">
<paper-icon-button id="iconomenuback" icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown colored" halign="left">
<core-menu class="menu">
<paper-item onclick="menuBackClick()">Escritorio</paper-item>
<hr />
<template repeat="{{menuit, i in menuits}}">
<paper-item>
{{menuit.Name}}
</paper-item>
</template>
<%--<asp:Literal ID="MainMenuItems" runat="server"></asp:Literal>--%>
<hr />
<paper-item onclick="panercontrol()">Panel de Control</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
And this is the script I'm using, it gets the json from a file, extracts the data from it and then uses it.
<script>
$.getJSON('api/mainmenu.json', function (data) {
var template = document.querySelector('#fulltemplate');
var itemsstring = JSON.stringify(data);
template.menuits = itemsstring;
});
</script>
At the moment it doesn't do anything, inspecting it returns plain <template repeat="{{menuit, i in menuits}}"></template> with nothing in it.
The #fulltemplate Template wraps all the content inside the body.
Related
Polymer 1.*
Is there a way to place a value other than the text in paper item that is used inside a paper-dropdown? For instance, when form is submitted I would like 50 instead of $50 dollars. I tried placing value='50' but the form still used the text $50 dollars.
<paper-dropdown-menu label="minimumPrice" name="minimumPrice">
<paper-listbox class="dropdown-content" selected="0">
<paper-item>No min</paper-item>
<paper-item>$50 dollars</paper-item>
There might be no official way to do that, but you could still technically accomplish your goal (with somewhat of a hack).
<paper-dropdown-menu> has an observer on its selectedItem that sets both its value and label to the same value (derived from the selected item); and the selectedItem is set by the <paper-dropdown-menu>'s event listener on iron-select, so you could add your own listener that overrides the label.
Here are the steps:
Specify the desired item value on each <paper-item>'s label attribute. Note the <paper-dropdown-menu> sets its value to the label of the selected item, but the text content of the <paper-item> still appears in the open dropdown menu (i.e., the listbox).
<paper-item label="0">No min</paper-item>
<paper-item label="50">$50 dollars</paper-item>
Add a listener for the iron-select event from <paper-dropdown-menu> in order to override the displayed label for the selected item.
ready: function() {
// <paper-dropdown-menu id="menu">
this.$.menu.addEventListener('iron-select', (e) => {
const paperItem = e.detail.item;
this.$.menu._setSelectedItemLabel(paperItem.textContent.trim());
});
}
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
const resp = e.detail.response;
this.response = JSON.stringify(resp, null, 2);
},
ready: function() {
this.$.menu.addEventListener('iron-select', (e) => {
const paperItem = e.detail.item;
this.$.menu._setSelectedItemLabel(paperItem.textContent.trim());
});
}
});
});
<head>
<base href="https://polygit.org/polymer+1.10.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-form id="myForm" on-iron-form-response="_onResponse">
<form action="https://httpbin.org/get">
<paper-dropdown-menu id="menu" label="Minimum Price" name="minimumPrice">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item label="0">No min</paper-item>
<paper-item label="50">$50 dollars</paper-item>
<paper-item label="100">$100 dollars</paper-item>
<paper-item label="200">$200 dollars</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<button type="submit">Submit</button>
</form>
</iron-form>
<pre>[[response]]</pre>
</template>
</dom-module>
</body>
codepen
Try
<paper-item value="50" selected>$50 dollars</paper-item>
This would select the $50 dollars as default and should grab the value
You can add label property in paper-item to get the desired result.
<paper-dropdown-menu label="minimumPrice" name="minimumPrice">
<paper-listbox id="test" slot="dropdown-content" class="dropdown-content" selected="0">
<paper-item label="0">No min</paper-item>
<paper-item label="50">$50 dollars</paper-item>
</paper-listbox>
</paper-dropdown-menu>
The value property in paper-dropdown-menu will always have the same value as of selectedItemLabel and the selectedItemLabel contains the value derived from the "label" of the currently selected item if set, or else the trimmed text content of the selected item.
Update
Another way:
Create a hidden input and assign the selected value to the hidden input's value.
<paper-dropdown-menu label="minimumPrice" >
<paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selected}}" attr-for-selected="value">
<paper-item value="0">No min</paper-item>
<paper-item value="50">$50 dollars</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<input is="iron-input" name="minimumPrice" id="hiddenSelected" type="hidden" value="[[selected]]">
And if you want first content to be selected by default you can assign inside ready function:
ready: function(){
this.selected = 0;
}
In my index.html I have a paper-scroll-header-panel with a paper-toolbar and a custom element serving as the page content:
<body unresolved>
<template is="dom-bind" id="app">
<paper-scroll-header-panel>
<paper-toolbar class="medium-tall">
...
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<x-content></x-content>
</div>
</paper-scroll-header-panel>
</template>
</body>
In x-content, I have a firebase-collection which I am looping over to show data:
<dom-module id="x-content">
<template>
<firebase-collection
limit-to-first="30"
location="myFirebaseURL"
data="{{items}}"></firebase-collection>
<template is="dom-repeat" items="{{items}}">
<x-item item="{{item}}"></x-item>
</template>
</template>
<script>
Polymer({
is: "x-content",
_loadMoreData: function (e) {
// load more
}
});
</script>
</dom-module>
I want to be able to load more data when the user scrolls. I have tried implementing the iron-scroll-threshold but it is not working. I expect I need to use the scrollTarget attribute to link it to an element which will fire the scroll event but I'm not sure which element I should use.
I have tried setting it to body, document and the paper-scroll-header-panel but none of these are working when I scroll - some are even firing on page load when no scrolling is happening!
Has anyone tried this?
You could try to link to paperScrollHeaderPanel.scroller
and make sure when loading the data function to clear the triggers:
scrollThreshold.clearTriggers();
see this
How can I use <template is="dom-bind"> within <test-fixture> with web-components-tester?
I have tried to use it Polymer 0.8 x-template way:
<test-fixture id="dom-bind-fixture">
<template is="dom-bind">
<h1>{{greeting}}</h2>
</template>
</test-fixture>
<script>
// ...
var bound = fixture('dom-bind-fixture', {greeting: 'ohai thurr'});
</script>
which naturally fails, as dom-bind does not have stamp method.
Then, I tried just stamping it out of native <template> element:
<test-fixture id="dom-bind-fixture">
<template>
<h1>outside dom-bind</h1>
<template is="dom-bind">
<h2>inside dom-bind</h2>
</template>
</template>
</test-fixture>
But in non-Chrome browsers this one stamps only outside dom-bind.
Is there a way to make it work, or is it just a blocking bug in web-components-tester/test-fixture/dom-bind?
Use dom-template, ie:
<test-fixture id="dom-bind-fixture">
<template is="dom-template">
<h1>{{greeting}}</h2>
</template>
</test-fixture>
<script>
// ...
var bound = fixture('dom-bind-fixture', {greeting: 'ohai thurr'});
</script>
I'm running into a similar problem as this question.
However, my case is a bit different and I can't seem to get it to work. I've been playing with it for a while an no luck so far.. I need href$="{{_getProject(item.project_id)}}" to be written as "webservices/api/projects/1" but the closest thing I can get is it outputting the item.project_id without being able to concatenate with it so just the 1. I've tried various things but below is what I have most recently. Does anyone have any ideas on how I can get this to work? I'm sure it's something I'm overlooking.
<template is="dom-bind">
<iron-ajax url="<?echo $url?>" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
<div class="item">
<div class="pad">
<div class="primary">[[item.project_name]]</div>
<div class="secondary">Project Deadline:</div>
<div class="secondary">[[item.project_deadline]</div
<div class="secondary">Total Hours to date:</div>
<div class="secondary">[[item.project_total_hours</div>
<div class="secondary">[[item.project_id]]</div>
</div>
<a href$="{{_getProject(item.project_id)}}"><iron-icon icon="assignment"><iron-icon></a>
</div>
</div>
</template>
<script>
Polymer({
_getProject: function(url) {
return 'webservices/api/projects/' + url
}
});
</script>
</iron-list>
</template>
The Polymer({...}) call you have inside of your iron-list won't work as you expect (and it should actually show an error in the console), since you are not defining/can't define a custom element inside of iron-list but only a template that will be stamped.
There are two ways to achieve what you want.
Define a custom element that you use inside of the iron-list
<dom-module id="my-item">
<template>
<div class="item">
...
<a href$="{{_getProject(item.project_id)}}">...</a>
</div>
</template>
<script>
Polymer({
is: 'my-item',
properties: {
item: Object
},
_getProject: function(url) {
return 'webservices/api/projects/' + url
}
});
</script>
</dom-module>
<iron-list items="[[data]]" as="item">
<template>
<my-item item="[[item]]"></my-item>
</template>
</iron-list>
Define the _getProject function on your main template
<template is="dom-bind" id="app">
...
<iron-list items="[[data]]" as="item">
<template>
<div>
<div class="item">
...
<a href$="{{_getProject(item.project_id)}}">...</a>
</div>
</div>
</template>
</iron-list>
</template>
<script>
var app = document.getElementById('app');
app._getProject = function (url) {
return 'webservices/api/projects/' + url
}
</script>
I begin using Polymer. It is great thing. Thanks to all conributors.
I have core-menu and core-pages elements.
<polymer-element name="my-element">
<template>
<style>
</style>
<core-menu selected="0" id="core_menu">
<core-item on-tap="{{sel_brosh}}" label="Broshura"></core-item>
<core-item on-tap="{{sel_list}}" label="Listovka"></core-item>
</core-menu>
<core-pages selected="0" id="sec_pages">
<section id="sec_brosh">Page One</section>
<section id="sec_list">Page Two</section>
</core-pages>
</template>
<script>
Polymer('my-element', {
sel_brosh: function () { this.$.sec_pages.selected = "0"; },
sel_list: function () { this.$.sec_pages.selected = "1"; },
});
</script>
</polymer-element>
It work as i want, but i think it is not 'best practice'. How can i make it with one function? I try to get value this.$.core_menu.selected, but i get only old value.
May be i chose a wrong way. I want get a few "pages" with simple menu which switching pages.
Try this:
<polymer-element name="my-element">
<template>
<core-menu selected="{{selected}}">
<core-item label="Broshura"></core-item>
<core-item label="Listovka"></core-item>
</core-menu>
<core-pages selected="{{selected}}">
<section>Page One</section>
<section>Page Two</section>
</core-pages>
</template>
<script>
Polymer({
selected: 0
});
</script>
</polymer-element>
ProTip: the MVC concept of Polymer is that the my-element has a data-model that informs it's children. I mention this because it's easy to look at this and say oh, core-menu and core-pages are data-bound, but the better description is that core-menu and core-pages are data-bound to my-element. The host, my-element, is in control (hence controller [or maybe more precisely presenter in an MVP pattern]) and the children don't interact with each other directly.