I have a paper dropdown menu polymer web component whose value changes on ajax call, the problem is that i have set the selected property to 0, so when the listserial changes on ajax call i am still seeing the pervious first value of listserials, i tried attr-for-selected so that i select the first serial from listserials, but it doesn't show any selected serial on ajax call
<paper-dropdown-menu id="accountTypeDropdown" on-iron-
select="_itemSelected">
<paper-listbox slot="dropdown-content" selected=0>
<template is="dom-repeat" items="{{listSerials}}">
<paper-item>{{item.serialno}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
Related
I have the following piece of code:
<dom-repeat id="template" items="{{chats}}">
<template>
<template is="dom-if" if="[[item.opened]]">
<section id$="msg-[[index]]"></section>
</template>
</template>
</dom-repeat>
How do can I access section with id=msg-3 and set scrollTop to 999 upon being rendered?
I know that in polymer 1 the best practice was to bind to on attached and wait on a dom-repeat event with a debouncer this no longer works in polymer 3, however.
If you know the index number you can access the element with ;
let el = this.shadowRoot.querySelector('#msg-'+<index>);
Remember, if item not rendered due to your filter with dom-if, you can not acces this element.
EDIT
In order to show on top of the selected item;
let screenPosition = el.getBoundingClientRect();
window.scrollTo(screenPosition);
Demo
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.
I am trying to use the paper-dropdown-menu and paper-listbox like a select input field which should automatically set the update the value of the field upon selection.
<paper-dropdown-menu label="Offense">
<paper-listbox slot="dropdown-content" class="dropdown-content" attr-for-selected="value" selected="{{player.position}}" fallback-selection="N-None">
<paper-item value="WR-Wide Receiver">WR-Wide Receiver</paper-item>
<paper-item value="ATH-Athlete">ATH-Athlete</paper-item>
<paper-item value="N-None">N-none</paper-item>
</paper-listbox>
</paper-dropdown-menu>
But upon selection, the dropdown refuses to disappear
The offical docs don't seem to mention how to use the two of them together to use like a select field.
Have you tried using an attribute name different from value?
I have experienced issues with certain attribute names that are defined in the HTML specs. Try testxyz instead of value as attribute name and see if that works for you.
I run on loop on the list (this is array). and for every I create icon-status with property item.status.
I want that is item.status changed for some reason also the property to the icon will change.
<template is="dom-repeat" items="{{list}}">
<paper-item>
<paper-item-body>
<div class="horizontal layout font-md">
//this is also dont bind on change
<icon-status state={{item.status}} size=7></icon-status>
<div class="flex"></div>
//this is not bind on change
<div class="gray">{{item.status}}</div>
</div>
</paper-item-body>
</paper-item>
</div>
</div>
</template>
I tried using timeout change the status of the items and the view does not update.
How can I bind this?
Thanks
To add binding support for list:
To update the value in the current element, use this.set('list.0.status', 'newStatus');
To update the value in a parent element, add list as a property on the current element:
list: { type: Array, notify: true }
Consider changing your template binding from two-way to one-way as the data is only flowing in one direction, <template is="dom-repeat" items="[[list]]">
I have a simple template like this
<template is="dom-repeat" items="[[items]]">
<paper-button active="{{item.selected}}" toggles raised>
<span>[[item.selected]]</span>
</paper-button>
</template>
If I activate the first paper-button in the list by tapping it and then call
this.set('items.0.selected', !this.items[0].selected);
It gets deactivated.
But then if I try the exact steps above again, the button doesn't get deactivated, which makes the button state and the selected value out of sync.
Why is it doing this? The issue can be replicated over here.
Interesting question. So I tried to use a single paper-button binding to a single item instance and it turned out to be working fine, which got me thinking that it might have something to do with path binding inside an array.
So I then added a tap handler to the paper-button and every time it's tapped, do a notifyPath on the selected subproperty path with the value of itself -
this.notifyPath('items.0.selected', this.items[0].selected);
And it works.