CODEWITHSUNDEEP
polymer-1.0
Subrata Sarkar
Subrata Sarkar

Reputation: 3064

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

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?

Upvotes: 3

Views: 1138

Answers (4)

bjschoenfeld
bjschoenfeld

Reputation: 412

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.

Upvotes: 0

AndreiM
AndreiM

Reputation: 4446

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>

Upvotes: 0

MrK
MrK

Reputation: 662

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.

Upvotes: 2

Flavio Ochoa
Flavio Ochoa

Reputation: 961

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.

Upvotes: 1

Related Questions