CODEWITHSUNDEEP
javascriptember.js
Tomasz Szawara
Tomasz Szawara

Reputation: 87

EmberJS - one way binding of query param to input field value broken

In below example: 

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  queryParams: ['query'],
  query: null,

  queryField: Ember.computed.oneWay('query'),
  actions: {
    search: function() {
      this.set('query', this.get('queryField'));
    }
  }
});

App.ApplicationRoute = Ember.Route.extend({

  queryParams: {
    query: {
      // Opt into full transition
      refreshModel: true
    }
  } 
});

Running example: http://jsbin.com/tukoye/2#/?query=22345

... if we arrive at ...?query=22345, any subsequent address navigation that changes query param will also update input field value. However after executing first search, this binding is broken, and field value no longer updates when query param changes.

Isn't the whole idea of : queryField: Ember.computed.oneWay('query') to always update queryField property?

(jsBin code here: http://jsbin.com/tukoye/edit?html,js)



One possible solution would be to add this to route:

actions: {
        queryParamsDidChange: function(params) {
            this.controllerFor('application').set('queryField', params.query);
        }
    }

... and remove queryField: Ember.computed.oneWay('query') from controller.

I'm looking for a best practice approach.

Upvotes: 3

Views: 648

Answers (1)

andrusieczko
andrusieczko

Reputation: 2824

The idea behind Ember.computed.oneWay is that you've got one way binding provided. So after you change the queryField to something else (just editing the input), it will be overridden.

What you can do instead is to create an observer that updates your queryField with some latency, e.g. using Ember.run.debounce.

Upvotes: 1

Related Questions