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.
Related
How do I create polymer components that contain other polymer elements ?
Can someone either point me at an example or give a working exampe please ?
I think you look for the tag <content>
have a look here
https://www.polymer-project.org/1.0/docs/devguide/local-dom
ex.
<dom-module id="simple-content">
<template>
<content id="myContent"></content>
</template>
<script>
Polymer({
is: 'simple-content',
ready: function() {
var distributed = this.getContentChildren('#myContent');
console.log(distributed.length);
}
});
</script>
</dom-module>
<simple-content> <div>THIS IS MY CHILD CONTENT</div> </simple-content>
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've created an element to display the results of an API call, but it not rendering. I've used the 'unregistered element' bookmarklet from the Polymer team which is showing this as unregistered. I'm using this within the Polymer starter kit.
I'm sure its a simple oversight on my behalf that I'm just not seeing.
The element is is listed in the elements.html file and is used in the main index.html file like so.
<section data-route="driver-standings">
<driver-standing></driver-standing>
</section>
The element
<dom-module id="driver-standing">
<template>
<style>
:host {
display: block;
}
</style>
<iron-ajax
auto
url="http://ergast.com/api/f1/current/driverStandings.json"
handle-as="json"
last-response="{{data}}"></iron-ajax>
<template is="dom-repeat" items="{{driverList}}">
<span>[[item.Driver.givenName]]</span> <span>[[item.Driver.familyName]]</span>
<template>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'driver-standing',
properties: {
data: {
},
driverList: {
computed: 'processDrivers(data)'
}
},
processDrivers: function (data){
console.log("processDrivers")
return data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
}
});
})();
</script>
</dom-module>
Any help much appreeciated
I missed the closing / on the template tag.
<template is="dom-repeat" items="{{driverList}}">
<span>[[item.Driver.givenName]]</span> <span>[[item.Driver.familyName]]</span>
<template>
became...
<template is="dom-repeat" items="{{driverList}}">
<span>[[item.Driver.givenName]]</span> <span>[[item.Driver.familyName]]</span>
</template>
Easily missed :)
Your dom-repeat - template should look some kind of this:
You should have your items you want to display in the item tag and as Polymer goes throw your Array it safes each Object under the name defined under the as - tag, so you can access the Object inside of your template binding with the name in curly brackets, like {{driver}}
<template is="dom-repeat"
items="{{driverList}}"
as="driver">
<p>{{driver}}</p>
</template>
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.
i want to inject a template into an polymer component like this :
<polymer-element name="foo-bar">
<template>
<content></content>
<!-- content is expected to contain a template with id="layout"-->
<template bind ref="layout">
default content template
</template>
</template>
<script src="index.js"></script>
</polymer-element>
usage of the component :
<foo-bar>
<template id="layout">another content template</template>
</foo-bar>
unfortunately the template provided as content of the element is not taken over for some reason.
when simluate the wished behaviour using
<polymer-element name="foo-bar">
<template>
<template id="layout">
custom content template
</template>
<template bind ref="layout">
default content template
</template>
</template>
<script src="index.js"></script>
</polymer-element>
the referenced template(id="layout") is used as expected.
Any help is appreciated :-)
<template ref="layout"> says use the template#layout for my content. So I would expect the template in your shadow dom to use the content of the light dom template. This is what you see in http://jsbin.com/takipi/1/edit.
However, if you want to use render the light dom <template> the user provides, you must activate it using template.createInstance(). By default, templates are inert. For this use case, you also don't need <content>. That's for rendering and in this case, it doesn't really make sense.
The example below also show how to set things up. It also shows how you can use {{}} bindings in the light dom <template> and fill them when the instance is created.
<div id="container"></div>
<template if="{{showDefault}}">
default content template
</template>
attached: function() {
var template = this.querySelector('template');
if (template) {
this.$.container.appendChild(
template.createInstance({foo: 5}));
this.showDefault = false;
}
}
Full code:
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="foo-bar">
<template>
<div id="container"></div>
<template if="{{showDefault}}">
default content template
</template>
</template>
<script>
Polymer({
showDefault: true,
attached: function() {
var template = this.querySelector('template');
if (template) {
// Allow Polymer expressions in the template's {{}}.
if (!template.bindingDelegate) {
template.bindingDelegate = this.element.syntax;
}
this.$.container.appendChild(
template.createInstance({foo: 5}));
this.showDefault = false;
}
}
});
</script>
</polymer-element>
<foo-bar>
<template>
<b>another</b> content template. Also supports data: {{foo}}
</template>
</foo-bar>