Question

我有一个包含多个组件实例的控制器。

// Template.
{{#each foo in foos}}
  {{my-component foo=foo}}
{{/each}}

在我的控制器中，我想为每个组件验证foo。

// Controller.
actions: {
  validate: function () {
    // for each component, call the "validate" action/function/whatever
    // and deal with the result.
  }
}

我该怎么做？

Answer 1

在您的控制器中

foos: null,// populated using set() somewhere 

validate: function() {
  var foos = this.get('foos');
  foos.forEach(function(item) {
    // process
  });
}.property('foos')

在您的模板中不需要做任何事情，{{each}}必然会受到影响。

有关项目（foo项目）上模板更改的更详细示例，您可以使用Ember.ArrayProxy。

Answer 2

您可以在控制器中拥有一个名为validate的属性，并将该属性传递给组件。该属性绑定在控制器和组件之间，然后您可以在组件内观察（观察）它并在设置为true时执行验证（在控制器中）。

App.IndexController = Ember.ArrayController.extend({
  validate: false,
  actions: {
    validate: function(){
      this.set('validate', true);
    }
  }
});

App.MyComponentComponent = Ember.Component.extend({
  foo: null, 
  validate: false,

  needsValidation: function(){
    alert("Validated!");
  }.observes('validate')
});

然后，在您的模板中，您将传递validate属性，如下所示：

{{ my-component foo=item validate=validate}}

请参阅工作示例here

Answer 3

这是我的解决方案。我使用Ember双向绑定功能。如下所示，我的foo数据现在类似于：

{ item: <my_data>, isValid: <boolean> }

所以，我的模板变成了：

// Template.
{{#each foo in foos}}
  {{my-component foo=foo.item foo=foo.isValid}}
{{/each}}

在我的控制器中，如果所有组件isValid属性都为真，我将返回一个解析的承诺。

// Controller.
validate: function () {
  var that = this;

  return new Ember.RSVP.Promise(function (resolve, reject) {
    var isValid = that.get('foos').isEvery('isValid', true);
    return isValid ? resolve() : reject();
  });
}

如何从控制器向组件发送操作？

3 个答案: