dom-if template got rendered once even if the condition is false

[namiwang]

Say I got something like this:

<dom-module id="what-ever">
  <template is="dom-if" if="{{foo.bar}}">
    <div>{{someComputedProperty(foo)}}</div>
  </template>
  <template is="dom-if" if="{{foo.baz}}">
    <div>{{someOtherComputedProperty(foo)}}</div>
  </template>
</dom-module>

Polymer
  someComputedProperty: () ->
    # computed some value rely on foo.bar being true
    return 'foo.bar is: ' + foo.bar
  someOtherComputedProperty: () ->
    # computed some value rely on foo.baz being true
    return 'foo.baz is: ' + foo.baz

When foo is changing from

{ bar: true, baz: false }

to

{ bar: false, baz: true }

The first template still got rendered, and that may cause some issue, since the method someComputedProperty always assumes foo.bar being true.

Additionally it's seems like wasting of performance, since it's rendering a template which should not be.

So I'm wondering is this a bug and what can I do for now.

Thx.

[kevinpschaaf]

The top-level template for a Polymer element must not be a template extension, like dom-if (and you should only have one top-level template). To fix your issue, you should just wrap both of your dom-if templates in a vanilla <template> tag. The contents of that template are what is stamped for each instance of the element, and then each instance of dom-if will evaluate its if variable to determine whether to stamp.

If you look in the console, with v1.0.0 you should be seeing a warning like:

[what-ever::_prepTemplate]: top-level Polymer template must not be a type-extension, found <template is=​"dom-if" if=​"{{foo.bar}​}​">​…​</template>​ Move inside simple <template>.

[kevinpschaaf]

Also note that by default, dom-if has a performance optimization that hides previously rendered nodes when switching from if==true to if==false rather than removing them from DOM and destroying them, since generally it's better hide and then re-use DOM it next time it becomes if==true rather than creating them again from scratch. To defeat this optimization and cause it to re-stamp each time if toggles, you can set the restamp attribute. This behavior is discussed in https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if.

[kevinpschaaf]

Closing this issue; please re-open if there is something deeper going on, and if so please try creating a repro case for us to look at starting with http://jsbin.com/dusofavuje/1/edit?html,output.

[namiwang]

@kevinpschaaf

Thanks for your reply, but the issue is still not fixed.

The missing of vanilla top-level is by mistake.

And I just make a more proper demo here to show you the bug.

Re-pro step:

1. click set apple
2. click set orange

What's wrong:
As the console output said, the parseAppleSpecies() have been called twice, which should be only once.

[emfluenceindia]

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 2 records are fetched the I want the loop to stop fetching more.

What is the best way to do this?

[zoechi]

@emfluenceindia Attributes need to be written with lower-case and hyphen only (indexAs="index" should be index-as="index")
Also index-as is an attribute of dom-repeat not dom-if.
Stackoverflow might be a better place for such questions anyway.