Ember.js：已接受的子组件与父组件之间通信的最佳实践

Question

我是 ember.js 的新手，我发现真正难以理解的事情之一是父组件和子组件之间数据和事件的双向通信。

我设法解决了一个更简单的问题，即维护项目列表、跟踪哪个项目处于活动状态以及从父组件更改活动子组件。该模式总结在 this jsbin 中。

我想知道，这是解决我问题的最佳方法吗？尽管 ember 是 'highly opinionated' 我发现有很多不同的方法可以实现同样的事情所以只是寻找一些保证或重定向。

Answer 1

最佳实践可以概括为 'data down'、'actions up'。您希望尽可能将数据向下传递给您的组件，并将操作向上传递给父级，以将子组件与父级隔离开，以便它可以在任何地方使用。避免通过双向绑定向上发送数据，因为这将不再是 Ember 2.0 中的默认设置。（默认情况下绑定是一种方式。）

我对您的 jsbin 所做的主要更改是，我将发送 itemSelected=itemSelected，而不是在您的模板中发送 parentCtrl=this。然后在您的项目组件中：

isActive: Ember.computed('itemSelected', function() {
    if (this.get('itemSelected') !== null) {
        return this.get('itemSelected.description');
    } else {
        return false;
    }
}),

Ember.js：已接受的子组件与父组件之间通信的最佳实践

Ember.js: Accepted best practices for communication between child and parent components

javascript

ember.js