Jochen Kühner Jochen Kühner - 9 months ago 49
Javascript Question

Polymer2: Update view of array element, generated via dom repeat

I've a array of objects wich create their view via dom-repeat. In this view I have a button wich increases a property of a array element.
But the view is not refreshed after this.
Is their a way to notify polymer2 to update:

Here is a Bit of Code:

<template id="filterElementList" is="dom-repeat" items="{{filterElements}}">
<div style="display: flex;">
<filter-panel-element style$="margin-left: {{_computeLevel(item.level)}}px;"></filter-panel-element>
<i class="fa fa-arrow-circle-left" aria-hidden="true" on-click="_decreaseLevel"></i>
<i class="fa fa-arrow-circle-right" aria-hidden="true" on-click="_increaseLevel"></i>
</div>
</template>


JS:

_increaseLevel: function (e) {
e.model.item.level++;
},


I update the level Property of the element, but the view is not updated...

Answer Source

So, Considering your template is bound to filterElements and you are trying to increment a sub property of an item within your array,

you might have to specify the data.path while updating a property and/or a sub property of an array, of your element.

so try this:

  • e.model.set('item.level',e.model.item.level+1)

Polymer has this documented in their data system documentation, and it helps Polymer propagate event notifications and also observe the data mutations.

If you can create a plunk, with your array and your elements, it'd be easier to troubleshoot further.

That is in case, the above changes to your code, don't achieve the desired result

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download