CODEWITHSUNDEEP
ember.js
Andreas Köberle
Andreas Köberle

Reputation: 110972

How to disable a text field in emberJS when controller loads data

I have the following controller:

var ProductsController = Ember.ArrayController.extend({
  search: function(queryString) {
    this.set('model', App.Product.find({query: queryString }));
  }
});

and a text field:

var SearchFieldView = Ember.TextField.extend({
  insertNewline: function() {
    this.get('controller').search(this.get('value'));
  }
});

Now I want to disable the text field when the controller loads a new model in the search function. Using something like disabledBinding: 'controller.content.isLoaded' in the view doesn't work.

Upvotes: 2

Views: 829

Answers (2)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10087

A simpler way, as you have already tried:

var ProductsController = Ember.ArrayController.extend({
  search: function(queryString) {
    this.set('model', App.Product.find({query: queryString }));
  }
});

var SearchFieldView = Ember.TextField.extend({
  attributeBindings: ['disabled'],
  disabled: function() {
    return this.get('controller.model.isLoaded') === false;
  }.property('controller.model.isLoaded'),
  insertNewline: function() {
    this.get('controller').search(this.get('value'));
  }
});

If you want all the Ember.TextField to have the disabled property binding: 

Ember.TextField.reopen({
  attributeBindings: ['disabled']
});

Upvotes: 0

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10087

var ProductsController = Ember.ArrayController.extend({
  search: function(queryString) {
    this.set('isLoadingData', true);

    var products = App.Product.find({query: queryString });
    this.set('model', products);

    products.then(function() {
      this.set('isLoadingData', false);
    });
  }
});


var SearchFieldView = Ember.TextField.extend({
  attributeBindings: ['disabled'],
  disabledBinding: 'controller.isLoadingData',
  insertNewline: function() {
    this.get('controller').search(this.get('value'));
  }
});

Explanation:

Before doing a request set isLoadingData to true. ember-data find() uses the Promise API: Set the isLoadingData to false when the request has been completed successfully. You might want to handle the failed case. See RSVP.js for reference. Finally bind the disabled property of Ember.TextField to controller.isLoadingData.

Upvotes: 1

Related Questions