Route refresh in ember does not clear input controls content

Question

In a template i have many input controls like text box.

I want to refresh the page, so i called this.refresh(); in the corresponding route's actions hash. Route is getting refreshed (model hook is fired..), but the user entered text in text boxes do not disappear. Then what is the point in refreshing?

How to make the input controls appear as it is like when the route was loaded first time?

Answer 1

Route Refresh is like visiting the route again, so depends on what your input fields are bound to are they dependent on your route model

Then they should fill the model's associated data.

if they are not associated they will not be cleared,if they are associated they will be filled with the data from the model.

Answer 2

You need to associate that those properties in model/controller. and reset model properties in model hook and controller properties in setupController accordingly for refresh. Ember will not redraw DOM unless it is in block helper like if each with ..

Whole point in Single Page application is replacing values without redrawing/refreshing..That's how we need to design App. IMHO.

But always there is hacky way in ember to make it possible. I would not recommend this.

routes/test.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return { name: 'kumkan' };
    },
    actions: {
        clickRefresh() {
            this.refresh();
        }
    }
});

controllers\test.js

import Ember from 'ember';

export default Ember.Controller.extend({
    isRefreshed: true,
    actions: {
        clickRefreshh() {
            this.toggleProperty('isRefreshed');
            this.send('clickRefresh');
        }
    }
});

Here comes hacky part,

templates\test.hbs

{{#if isRefreshed}}
    {{test-comp model=model}}
  {{else}}
   {{test-comp model=model}}   
 {{/if}}
 <button {{action "clickRefreshh"}}> Refresh </button>
 {{outlet}}

templates\components\test-comp.hbs

<input type="text" value="Kumkan" /> 
{{input value=model.name}}
{{yield}}