ember.js - 控制器加载数据时如何禁用emberJS中的文本字段

Question

我有以下控制器：

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

和一个文本字段：

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

现在我想在控制器在搜索功能中加载新模型时禁用文本字段。在视图中使用类似的东西是disabledBinding: 'controller.content.isLoaded'行不通的。

Answer 1

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'));
  }
});

说明：

在做一个请求之前设置isLoadingData为true. ember-datafind()使用Promise API：当请求成功isLoadingData完成时设置为。您可能想要处理失败的案例。请参阅RSVP.js以供参考。最后将 disabled 属性绑定到。falseEmber.TextFieldcontroller.isLoadingData

Answer 2

一种更简单的方法，正如您已经尝试过的那样：

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'));
  }
});

如果您希望所有 Ember.TextField 都具有disabled属性绑定：

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