Manually destroy and reset element?

Question

Polymer 1.*

I have a custom element that has a form. In addition, there is a few event listeners and custom handlers that I have states for in different parts of the form.

When a user submits the form, I can just do reset() on the form. But this doesn't reset the states inside the handlers I have for my custom logic.

After a user submits the form, I element needs to reset to it's default values. The cleanest way to do this is to destroy the template and re-stamp it. I don't want to have to manually code and reset each object property/variable state.

I can not use <template is="dom-if" if="{{condition}}" reset> because that can only be used in a nested template...which means states/variables/objects persist for the parent template.

Is there a way I can destroy a template and restamp it? Performance hit is not a issue here.

Answer 1

what i suggest you to do is to wrap your form with custom element. so for example you create element called my-form and put iron-form and all inputs inside it. inside your my-form element you will need to propagate events to parent propably, which isn't problem, since there is fire() function you can call in my-form and addEventListener in parent element.

So in my-form you will listening to iron-form onSubmit then call this.fire("formSubmitted"); and in parent element inside (for example) ready function:

this.addEventListener("formSubmitted", function() {
  Polymer.dom(this.root).removeChild(this.$$("my-form"));
  Polymer.dom(this.root).appendChild(document.createElement("my-form");
}.bind(this));

and that's it. I hope i understand your question right.