CODEWITHSUNDEEP
javascriptember.js
Chance Brilz
Chance Brilz

Reputation: 13

Rerendering Components' DOM in Ember.js

I am trying to re-render a components HTML in the DOM when I call this.rerender(); In the following example I have a form that saves data to the server, and after that is done I want to reset the form so users can submit more data. I do not want to individually clear each property (this is only one example, there are other uses besides a form). Currently, when I run this.rerender();, it calls methods such as didRender() but does not replace the HTML in the DOM.

Does anyone have a clue how to do this?


Example:

route.hbs

{{my-component}}

my-component.js

actions: {
    submit: {
        // save form data to server, etc.
        this.rerender(); // re-render html in DOM
    }
}

my-component.hbs

<form {{action 'submit' on='submit'>
    {{input id='name' value=name}}
    <button class="btn green" type="submit">Login</button>
</form>

Upvotes: 1

Views: 132

Answers (1)

Lux
Lux

Reputation: 18240

It does rerender the DOM, but also reattaches all variables you've set in your component. A good way for this is to have a variable for the user data on the component that you can replace.

So something like this in your component:

init() {
  this._super(...arguments);
  set(this, 'userData', Ember.Object.create());
},
actions: {
  submit: {
    // save form data to server, etc.
    set(this, 'userData', Ember.Object.create());
  }
}

And then in your template instead of {{input id='name' value=name}} do {{input id='name' value=userData.name}}

I think since we've got glimmer there is no reason to call rerender anymore. This method is not build to replace or update the DOM, or to be used on a regular use-case in any application. Its only purpose it to fix some very uncommon edge-cases.

For every usual use-case ember will keep your DOM in sync with your JS state automatically. So you have to fix your JS state, never the DOM directly.

Also even if you could replace your DOM, this wouldn't help with your problem, since your JS state would still contain the old data.

Upvotes: 1

Related Questions