In polymer, let's say I have a container element <x-container>, and two child elements <a-child>, <b-child>. In an element, I want to be able to specify that it contains either <a-child> or <b-child> (it will never have both).
For example, it could look like:
1. <x-container><a-child></a-child></x-container>
or,
2. <x-container><b-child></b-child></x-container>.
Since <x-container> has a lot of code, I don't want to duplicate it, but want to be able to use an <x-container> like this:
<x-container type = 'a-child'></x-container> which would then have the same behavior as the first item mentioned. How could I achieve this functionality?
Just instanciate it when you have the information which one its going to be!
//in your x-container component
observers: ['_typeChanged(type)'],
_typeChanged: function(type) {
var child = this.create(type);
Polymer.dom(this.root).appendChild(child);
}
Or you use a slot then you could do smth like this
parent component
<x-container>
<template is="dom-if" if="[[_isA()]]"><a-child></a-child></template>
<template is="dom-if" if="[[_isB()]]"><b-child></b-child></template>
</x-container>
and in your x-container´s template just simply put a slot the child will be rendered within the slot
<slot></slot>
Related
I read carefully these threads
Polymer 1 nested dom-if within dom-repeat not updating when data changes
how to dynamically append an element to dom-if in Polymer?
How to access content of dom-if inside a custom element?
that may have some relation with my question but I didn't manage find any clue if I can do what I want and how.
In my company, there are several flows, each one for each business flow and each step of the flow is a screen coded as a Polymer 1 web component. All them are warraped in a root Polymer component which defines the route.
A simple exemple would be:
my-root-component:
<dom-module id="my-root-component">
<template>
<first-obrigatiory-page which-route={aValueReturnedFromFirstComponent}></first-obrigatiory-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromFirstComponent)]]" restamp>
<second-page which-sub-route={aValueReturnedFromSecondComponent}></second-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromSecondComponentComponent)]]" restamp>
<third-page ></third-page>
</template>
</template>
</template>
<script>
Polymer({
is: 'my-root-component',
behaviors: [doesntMatterHere],
properties: {
The first dom-if works as expected but the second seems not be taken in account and my third-page component is never showed.
I checked and the equivalent for _isTrueFunction(aValueReturnedFromSecondComponentComponent) is returning true.
Does aValueReturnedFromFirstComponent really return anything, because you should declare the attribute as which-route="{{aValueReturnedFromFirstComponent}}" instead of using simple { }.
Does the whichRoute (note the camelCase) property in the first-obrigatiory-page element have the notify: true property so the variable actually sends back the updated value?
I usually set observers on variables whenever dom-ifs don't update so I can see if they really change or not, and then set the variables myself through the console with document.querySelector('my-root-component').set('aValueReturnedFromFirstComponent', true) so I can see that the dom-if really updates.
A workaround could be to use events, but what you've done should work.
Working jsbin illustrating the problem: http://jsbin.com/nomewa/3/edit?html,console,output
I am trying to set the innerHTML of notworking span inside of a template that makes up the vaadin-grid. It does not currently seems to be possible to bind to on-change of vaadin-checkbox when said vaadin-checkbox lies within vaadin-grid since I cannot even access the element within the grid.
It does not currently seems to be possible to bind to on-change of vaadin-checkbox when said vaadin-checkbox lies within vaadin-grid since I cannot even access the element within the grid.
You can use declarative event bindings inside the column tempates, so you don’t have to have a reference to the actual stamped element.
Something like this:
<vaadin-grid-column>
<template>
<vaadin-checkbox on-checked-changed="_myListener">Checkbox</vaadin-checkbo>
</template>
</vaadin-grid-colum>
This is a great way to try some codes (jsbin :) Here this code works but I do not know is it going to fit your need. (I cut and copied only changed parts :
At the property declaration, you may set a pre-value to notWorking property. Then you may change it with dynamically in a function.
<iron-ajax url="https://randomuser.me/api?results=10" last-response="{{response}}" auto></iron-ajax>
<span id="working">Working</span>
<vaadin-grid id="grid" items="{{response.results}}" style="height: auto;">
<vaadin-grid-column>
<template class="header">Name</template>
<template>[[item.name.first]] [[item.name.last]] <span>{{notWorking}}</span></template>
</vaadin-grid-column>
</vaadin-grid>
</template>
<script>
class MyTest extends Polymer.Element {
static get is() { return 'test-component'; }
ready() {
super.ready();
this.set('notWorking',"test")
debugger;
}
}
Here the working link
At first, i know, there are many questions about iron-list. But mostly about editing items and not whole template inside iron-list..
My code is really extremely complicated and posting it is pointless. I am working on data-tables which are using iron-list. I have element called diamond-listing and inside this diamond-listing i have iron-list.
You can image this like: Parent element define <template> with some content inside it, and child element (diamond-listing) will render this template as a table
Of course diamond-listing is used multiple times in my application and always with different template. For example: page users have columns with userID, userName etc.. and on page stations there are columns stationID, address etc.. with different number of columns. Every pagea has it's own <template> which i am trying to propagate to diamond-listing. For example:
<diamond-listing as="user" id="permissionsTable" type="pagination" pagination-items-per-page="6" header-data="{{headerData}}" address="/user/" loading="{{loading}}">
<div id="test" slot="content">
<template>
<div class="diamond-row" on-tap="_openUrl" info$="/user/[[user.id]]">
<diamond-item text="{{user.username}}"></diamond-item>
<diamond-item text="{{user.partner.name}}"></diamond-item>
</div>
</template>
</div>
</diamond-listing>
What i managed to do is to make it work in shadow dom using <slot> and simply rewrite <template> inside <iron-list>, but here we are.. For example using Firefox, which doesn't support webcomponents, there isn't <template> as a child of <iron-list> (because there is no shadow-dom) so there is no way how to update <template> and render iron-list.
What i tried:
1) Find template inside iron-list and use removeChild and appendChild functions.
var test = this.querySelector("#test template");
this.$$("#diamondList").removeChild(this.$$("#diamondList template"));
this.$$("#diamondList").appendChild(test);
Without success.
2) Define in HTML empty iron-list without any template inside it. And then in javascript add template dynamically. Without success. ( iron-list is crying it requires template)
3) Create dynamically iron-list using document.createElement
var test = this.querySelector("#test template");
var list = document.createElement("iron-list");
list.appendChild(test);
list.as = this.as;
list.items = [{"username":"test","partner":{"name":"Test partner","id":1}}];
list.id = "diamondList";
result: same as 2) ...
Is there a way, how to update template which is used to render all items in iron-list?
Or create iron-list with defined template inside JS ?
Or somehow do it with dom-repeat ? I won't have more than 10 items in listing, since it's fully pagination listing. ( this is propably simplest solution, but i don't know how to render <template> for every iteration
Here is one general answer, don't know if it will work for your case:
In Polymer, recommended way of manipulating the DOM is by manipulating the data, not by removeChild or appendChild.
For example,
if you have list of users as: var users_array = [....];
create the iron-list as:
<iron-list date="users_array">
<template>
...
<template>
</iron-list>
adding and removing elements in users_array will affect the iron-list
immediately.
Use a dom-if or use hidden inside the iron-list.
<iron-list items="[[items]]">
<template>
<template is="dom-if" if="[[item.isType1]]">
<!-- item1 -->
</template>
<template is="dom-if" if="[[item.isType2]]">
<!-- item2 -->
</template>
</template>
</iron-list>
I have a template dom-repeat element. I know that I can define the items attribute from an array, so that item can be accessed inside the template. However, I don't know how to access other objects inside the template if I bind them to customer polymer elements.
In this example, items is being defined by someItems, and item is passed into the element <my-el>. I also have a string mine that I want to pass into <my-el> and use there. I currently have the idea to do this in app-el.html, which contains the dom-repeat template:
app-el.html
<template is="dom-repeat" items="[[someItems]]">
<my-el item=[[item]] mine="[[mine]]"></my-el><br>
</template>
In theory, I would be able to access both in my-el.html like this:
my-el.html
[[item]] [[mine]]
However, when I try to access mine from inside <my-el> it is undefined. How can I correctly pass in this string so I can access it?
An MCVE can be found on this Plunker. Note how the item string is defined inside <my-el> but the mine string is not.
Your data bindings look correct, but there is no mine property for my-app. Did you mean to define <my-app>.myProperty as <my-app>.mine? Changing that property name to mine fixes your problem.
plunker
Say I have two separate lists of polymorphic objects: Shape -> Circle and Shape -> Rectangle. Shape contains the properties "name" and "description", while Circle contains the properties "center" and "radius" and rectangle contains "length" and "width" properties. I'd like to have a single Polymer component, "shape-list", that would be able to handle display of either the list of Circles or list of Rectangles and display the specific properties of each type in the list.
"shape-list"'s template might look something like so:
<template>
<ul>
<template is="dom-repeat" items="[[shapes]]" as="shape">
<li>
<shape-entry shape="[[shape]]">
<!-- The user of shape-list knows whether we want to display
Rectangles or Circles. We want to customize the display
of each shape-entry with information specific to each
shape by using some sort of prototype element supplied
to the shape-list tag. -->
<content select="..."></content>
</shape-entry>
</li>
</template>
</ul>
</template>
And "shape-entry"'s template would look something like so:
<template>
Name: <span>[[shape.name]]</span>
Description: <span>[[shape.description]]</span>
<!-- Ideally we would take the passed-in prototype element and
stamp it out here. -->
<content select="...?"></content>
</template>
Further, we would have templates for "shape-circle" and "shape-rect":
shape-circle:
<template>
Center: <span>[[shape.center]]</span>
Radius: <span>[[shape.radius]]</span>
</template>
shape-rect:
<template>
Length: <span>[[shape.length]]</span>
Width: <span>[[shape.width]]</span>
</template>
The usage would ideally be something like the following:
I can see two ways of accomplishing the above:
Not using "content" tags, but instead setting a property on the shape-list and shape-entry elements to the actual prototype object reference or name of the specific shape, then having some magic JavaScript that creates an instance of that specific shape element based on that property and manually wiring all of the data binding together. This yields additional complexity to assemble the elements and data binding.
Replicate "shape-list" and "shape-entry" into "rect-list", "circle-list" and "rect-entry", "circle-entry", and share styles and behaviors between the subtypes. This results in some code duplication.
Is there a better way of accomplishing the above? I'd (ideally) prefer an entirely declarative approach!
You could have a shape-list component that uses an "if" template to display the proper shape component (rect-entry, circle-entry ). Each shape entry should declare a shared behavior, e.g ShapeBehavior that has all the shared shape behavior to avoid duplicity.
.. inside the dom-repeat
<template is="dom-if" if="{{_isRect(item)}}" >
<rect-entry shape={{item}} ></rect-entry>
</template>
<template is="dom-if" if="{{_isCircle(item)}}" >
<circle-entry shape={{item}} ></circle-entry>
</template>
If you want to dynamically pass the element that should be used , then a programatically solution is needed.