Polymer 1.0: How to stop dom-repeat loop from executing using a dom-if check inside the loop

Question

I am trying to accomplish a conditional binding using a dom-if inside a dom-repeat. Here is my code:

<template is="dom-repeat" items="{{customers}}">`
     <template is="dom-if" if="_continueLoop(index)" indexAs="index">
          Data renders here
     </template>
</template>

Function _continueLoop(index) looks like:

_continueLoop: function (value) {
      alert("This function is not being called at all!No alert message.");
      if (value == 1) return true;
      else return false;
}

My intention is to stop dom-repeat loop to continue if value of index is 1, i.e. when first 2 records are fetched I want the loop to stop fetching more.

What is the best way to do this?

score 2 · Answer 1 · answered Nov 30 '15 at 22:57

I don't think this is the best answer for the reason below, but I thought I would share one solution. You could use a filter:

<dom-module id="employee-list">
    <template>
      <template is="dom-repeat" items="{{employees}}" filter="_filter">
        <div># <span>{{index}}</span></div>
      </template>

    </template>

    <script>
      Polymer({
        is: 'employee-list',
        ready: function() {
          this.employees = [{
            name: 'Bob'
          }, {
            name: 'Sally'
          }];
        },
        _filter: function(item) {
          // This is slow. The larger your array, the worse
          // the performance will be 
          return this.employees.indexOf(item) < 1; 
        }
      });
    </script>
  </dom-module>

Note that this is not efficient, as the binding help pages explains:

Because of the way Polymer tracks arrays internally, the array index isn’t passed to the filter function. Looking up the array index for an item is an O(n) operation. Doing so in a filter function could have significant performance impact.

Nice approach. Thank you for your reply. I am dealing with "nearest customers" based on user's current lat/lng and there should not be more than 50 odd records at one time. I hope Polymer is OK to handle this much of records fine without any real performance impact ! — Subrata Sarkar, Dec 01 '15 at 05:13

score 1 · Answer 2 · answered Nov 30 '15 at 17:03

Maybe you can make a filter before to pass data to dom-repeat. In this filter you will reduce the array elements as you need.
Another solution that may help you is modify the condition like this:

_notPassWhenValueIsGreaterThanOne: function (value) {
    return value <= 1;
}

If value<=1 the elements will be attached to dom, in other way this elements will be in memory, but elements will are not visible and dom-repeat´s iterates the entire array.

score 0 · Answer 3 · answered Dec 08 '15 at 20:35

0

Your idea is right, just take the function call in {{}}:

<template is="dom-repeat" items="{{customers}}">`
    <template is="dom-if" if="{{_continueLoop(index)}}" indexAs="index">
        Data renders here
    </template>
</template>

answered Dec 08 '15 at 20:35

AndreiM

4,406
2
18
20

I tried a double mustache wrapper around the function call already but that didn't work either. I wanted to break the loop but it is not happening the way I visualized. – Subrata Sarkar Dec 09 '15 at 04:21

score 0 · Answer 4 · edited May 23 '17 at 10:34

One possible solution is to compute the subset of items you wish to display and bind the items attribute of the <template> tag to that subset.

The html might look like:

<template is="dom-repeat" items="{{selectedCustomers}}" as="customer">
    <!-- render customer here-->
</template>

and the in the .js file you might have the function:

selectCustomers: function() {
    this.selectedCustomers = [];
    this.push("selectedCustomers", this.customers[0]);
    this.push("selectedCustomers", this.customers[1]);
}

As a side note, building the array using this.push() alerts the observer that this.selectedCustomers changed and it will re-render the dom-repeat. See Dynamic update of dom-repeat templates by changing the underlying array.

Obviously, you can have more dynamic code to determine which subset of items to display.

"using this.push() alerts the observer that this.selectedCustomers changed and it will re-render the dom-repeat" - this is useful stuff! I am going to look into the link soon. — Subrata Sarkar, Jun 24 '16 at 04:48

Polymer 1.0: How to stop dom-repeat loop from executing using a dom-if check inside the loop

4 Answers4