Reload model and maintain input value

1

Hi, I have an Ember application where the user can enter a query value gui leading to a model reload with respect of that input value. The problem is that the value entered by the user gets lost during model reload. How can I mantain the value ?

1 Like
2

Typically you would want to bind the input values to a query param (on the ember side) so the input values are persistent across page refreshes etc. That said I’m not sure why a model refresh would clear the input value even without a QP binding. How is your model loading setup?

2 Likes
3

Hi, in my opinion there is nothing special with my model setup This is the controller

export default Controller.extend({
  queryParams: ['dueDate'],	
  dueDate :moment(),
   actions: {
	changeDueDate : function(date) {
	this.set('search', date.format('yyyy-MM-DD'));
	}
  }
});

This is the route:

export default Route.extend(AuthenticatedRouteMixin,{
	queryParams: {
	    search: {
	      refreshModel: true
	    }
    },
	model(params) {
    		return this.store.query('mitarbeiterzeit', { dueDate : params.search})
	}
});

and this the template where the input value will be reseted every time the model is reloaded

<div class="panel-body">
	<div class="col-xs-5">
		{{bs-datetimepicker
		      updateDate=(action "changeDueDate")
			format='DD.MM.YYYY'
			date=search
			useCurrent=true
		}}
    </div>
</div>
4

I agree there’s nothing special going on here. That said I’d think the controller should have:

  queryParams: ['search'],	
  search :moment(),

instead of

  queryParams: ['dueDate'],	
  dueDate :moment(),

If it’s not that you could try putting {{log search}} above the datetimepicker and see if the search value is actually cleared or if the datetimepicker isn’t picking it up correctly. It’s possible the component doesn’t like the string formatted date you’re giving it after it’s set. If that’s the case you could add a CP to your controller e.g.:

  searchMoment('search', function() {
    return moment(this.search);
  }),

and then change your template to:

  {{bs-datetimepicker
    updateDate=(action "changeDueDate")
    format='DD.MM.YYYY'
  - date=search
  + date=this.searchMoment
    useCurrent=true
  }}

I’m not familiar with bs-datetimepicker but I also notice the format arg you’re passing it doesn’t match the format you’re using when you set the value in the action. Could also be something as simple as that?

5

Hi Dan, thx for your help :slight_smile: I have figured out that the value of the input did not get lost. There is rather a problem with the ui binding regarding the datetimepicker component :frowning: