javascript - 我应该如何在 Ember 组件之间共享数据？

Question

我的 Ember 应用程序有一个路由，其中​​包含 2 个不同的组件和一个带有 index.hbs 模板的 Controller 。

这是它的样子:

1) 用户可以从过滤器组件的下拉列表中选择多个过滤器

2) DataGrid 是一个独立于过滤器的组件

3) 用户可以通过复选框从 DataGrid 中选择多行

4) 创建自定义报告按钮向路由 Controller 触发“sendAction”

此数据不是特定于模型的...它只是我可以制作自定义报告之前所需的临时数据。

Ember 最佳实践是“Data Down/Actions Up”，根据我的阅读，您不应该尝试从 Controller 访问组件。

但是，问题是 Controller 中的 createCustomReport 方法需要访问在过滤器组件中选择的所有过滤器以及在网格组件中检查的所有行.

我的第一直觉是在组件本身上设置属性 - 让它保持自己的状态 - 然后从 Controller 获取对组件的引用，以便在将其传递给报告函数之前获取其状态。

但显然这是一个禁忌。

---

这是我当前的解决方案:

每次我选择一个过滤器时，都会有一个 sendAction 从组件冒泡到 Controller 并在 Controller 上设置自定义属性。

此外，每次我从网格中选择一个复选框时，另一个 sendAction 会转到组件，然后冒泡到 Controller 并在 Controller 上为选定的网格行设置自定义属性。

然后，当我单击“createCustomReport”时，在 Controller 中触发的方法可以访问我之前设置的属性 - 因为它们现在都在 Controller 上。

所以它看起来像这样:

import Ember from 'ember';

export default Ember.Controller.extend({

    myFirstFilter: undefined,
    mySecondFilter: undefined,

    actions: {
        createCustomReport() {
            // do something with all those component properties you've been setting
        },

        // These are triggered by the sendAction on the respective component
        firstFilterMethod(myProperty1) {                
            this.set('myFirstFilter', myProperty1.name);
        },

        secondFilterMethod(myProperty2) {               
            this.set('mySecondFilter', myProperty2.name);
        },

        ... etc...


    }
});

---

这是我的问题

我不是直接从 Controller 访问组件，而是通过使用“Actions Up”原则，我在 Controller 上设置 View 特定的属性。

来自 Sencha ExtJS 背景，其中 Controller 引用了他们的 View ，我觉得这很奇怪。

通过不获取对组件的引用，我应该将我的 Controller 与其 View 分离...但是由于我设置的所有属性通常都在 View 上，所以 Controller 最终甚至与 View 相比，如果我只是获得对组件的引用，它会更耦合。

这是否被视为 Ember 中的“最佳实践”，或者是否有更好的方法让我获取所有这些独立组件的数据以触发 createCustomReport 方法？

Answer 1

好吧，我想我已经设法解决了我自己的问题并开始使用 Ember 做事的方式。

我找到了 2 种不同的解决方案，每一种都有其优点。此外，我还创建了 2 个关于如何解决状态传播和共享组件数据的小型 Ember Twiddle 迷你教程。

这两种解决方案都完全符合 Ember 2.6 的处理方式:无需 Controller 。

第一个是使用 Ember 服务。

---

我建立了一个简单的电影列表，可以在这里查看: https://ember-twiddle.com/c91e98cd255a556311417ac603ab0315

通过关注文件中的评论并查看上面的 Ember Twiddle，您应该可以回答有关如何实现它的所有问题。

由于服务是单例的，我可以将它注入(inject)到我的组件和路由中，它的唯一目的是维护其关联组件的数据。

组件如下所示:

import Ember from 'ember';

export default Ember.Component.extend({
  movieService: Ember.inject.service('movie-displayer-service'),
  currentSelectedMovie: '',

  didInsertElement: function() {
    // When the component is inserted into the DOM tree, use the model to set
    // the 'currentSelectedMovie' property.
    this.set('currentSelectedMovie', this.get('model').currentSelectedMovie);   
  },

  actions: {
    selectMovie: function(movie) {
      // Instead of saving state in the component itself, let's
      // save it in a service that can be consumed anywhere
      // in the application.

     this.get('movieService').setupCurrentSelectedMovie(movie);

     // When the movie changes, we can override the 'currentSelectedMovie' property
     // that is being populated with the 
     this.set('currentSelectedMovie', movie);   

    }
  }
});

服务如下所示:

import Ember from 'ember';

export default Ember.Service.extend({
  currentSelectedMovie: undefined,

  setupCurrentSelectedMovie: function(movie) {
   this.set('currentSelectedMovie', movie); 
  },

  showSelectedMovie: function() {
    if (this.get('currentSelectedMovie')) {
        alert("The current selected movie of the movie-displayer component is:  \n" + this.get('currentSelectedMovie'));
    } else {
        alert('Please Select a Movie First');
    }
  }
});

这是组件的 Handlebars 文件:

<div class="movie-list-container">
    <h4 class="movie-list-title">Movie List</h4>

  <ul>
    {{#each model.movies as |movie|}}

        {{!--   'eq' is a helper function that I made
                    to compare two values.  You can check it out in
              the 'helpers' folder.
      --}}
        <li class="{{if (eq movie currentSelectedMovie) "selected" "not-selected"}}" {{action 'selectMovie' movie}}>{{movie}}</li>
    {{/each}}
  </ul>

</div>

路线如下所示:

import Ember from 'ember';

export default Ember.Route.extend({
  movieService: Ember.inject.service('movie-displayer-service'),

  model: function() {
    return {
        currentSelectedMovie: this.get('movieService').currentSelectedMovie,

      movies: ['Captain America: Civil War', 'Guardians of the Galaxy', 'Ant Man']
    }
  },

  actions: {
    showServiceState: function() {
        this.get('movieService').showSelectedMovie();
    }
  }
});

---

服务解决方案的优点:

作为单例，我可以在应用程序的任何位置访问该组件的数据。

服务解决方案的缺点:

我必须将它注入(inject)到我想在其中使用它的每个文件中 - 从而在我进行时创建依赖项。另一种解决方案是使用 Ember Initializer 类，该类会在应用程序启动时自动将其注入(inject)路由、 Controller 或组件。当然，这意味着它将进入它所注入(inject)的每一个实例，这可能是过度的。

---

第二种解决方案在没有服务的情况下将状态从组件发送到路由器

---

第二个 Ember Twiddle 是一个简单的餐厅列表，展示了如何在不需要服务的情况下传播状态:

https://ember-twiddle.com/dffc679fb96434ba6698161ba7617d15

这是组件的 Handlebars 文件:

<div class="restaurant-list-container">
  <ul>
    {{#each model as |restaurant|}}
      <li class="{{if (eq currentlySelectedRestaurant restaurant ) 'selected' 'not-selected' }}" {{action 'selectRestaurant' restaurant}}>{{restaurant}}</li>
    {{/each}}
  </ul>

</div>

这是路由文件:

import Ember from 'ember';

export default Ember.Route.extend({  
  // Properties Here
    currentlySelectedRestaurant: 'Please Select a Restaurant',

  model: function() {
    return ['Taco Bell', 'McDonalds', 'Dennys']
  },

  actions: {
    setupRestaurantState : function(restaurant) {
        this.set('currentlySelectedRestaurant', restaurant);
    },

    getComponentState: function() {
     alert(this.get('currentlySelectedRestaurant'));
    }
  }
});

这是组件文件:

import Ember from 'ember';

export default Ember.Component.extend({

  currentlySelectedRestaurant: undefined,

  actions: {
    selectRestaurant: function(restaurant) {

      // The 'sendAction' method is where the magic happens.
      // A method called 'stateSetter' references a function
      // that lives either on the controller or the route.
      // This was setup when the component was instantiated in the
      // fancy-restaurants.hbs file.
      this.sendAction('stateSetter', restaurant);
      this.set('currentlySelectedRestaurant', restaurant);
    }
  }
});

---

注意 Route 包含一个未定义的状态属性:'currentlySelectedRestaurant'。

这很容易是一个具有多个属性的对象或一个数组。

您还可以有一个通用名称，如“componentState”，并存储您选择从任何组件发送的任何内容:例如，在过滤列表中检查的选项或从网格中选择的项目。

不使用服务的优点:

这更容易做到。只需在您的组件中使用 sendAction() 来冒泡到路由器。并且没有创建额外的文件或任何依赖项。

不使用服务的缺点

由于模型数据从路由级别向下流动，因此如果更改路由，您将无法访问状态。

---

每个解决方案都是可行的，所以我会留给您找出最有效的解决方案。

此外，我还没有将此标记为答案，因为其他人可能有更好的解决方案，并且很高兴能就此获得一些反馈。