Question

我有一个包含js网格布局算法的Ember.Component。它在重新加载时运行良好，但不响应路由转换。假设我从item \ 1过渡到item \ 2我希望组件重新布局网格。

didInsertElement: function() {
  this._super();
  Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
},  
afterRenderEvent: function() { 
  //re-layout grid
}

我如何回应路线的didTransition行动？我应该怎样做到这一点？

Answer 1

你可能会做这样的事情（测试并使用Ember 2.9.1）：

Started GET "/api/v1/groups" for ::1 at 2016-11-17 16:56:15 -0700
Processing by Api::V1::GroupsController#index as JSON
  Group Load (0.2ms)  SELECT "groups".* FROM "groups"  ORDER BY "groups"."name" ASC
  Platform Load (0.3ms)  SELECT "platforms".* FROM "platforms" WHERE "platforms"."id" IN (8, 3)  ORDER BY "platforms"."name" ASC
  GroupOperationalState Load (0.2ms)  SELECT "group_operational_states".* FROM "group_operational_states" WHERE "group_operational_states"."group_id" IN (1, 2, 3)
  OperationalState Load (0.2ms)  SELECT "operational_states".* FROM "operational_states" WHERE "operational_states"."id" IN (1)  ORDER BY "operational_states"."name" ASC
  GroupLifecycleState Load (0.4ms)  SELECT "group_lifecycle_states".* FROM "group_lifecycle_states" WHERE "group_lifecycle_states"."group_id" IN (1, 2, 3)
  LifecycleState Load (0.2ms)  SELECT "lifecycle_states".* FROM "lifecycle_states" WHERE "lifecycle_states"."id" IN (2)  ORDER BY "lifecycle_states"."name" ASC
  GroupConfigurationProfile Load (0.3ms)  SELECT "group_configuration_profiles".* FROM "group_configuration_profiles" WHERE "group_configuration_profiles"."group_id" IN (1, 2, 3)
  ConfigurationProfile Load (0.3ms)  SELECT "configuration_profiles".* FROM "configuration_profiles" WHERE "configuration_profiles"."id" IN (1, 2, 3)  ORDER BY "configuration_profiles"."name" ASC
[active_model_serializers] Rendered ActiveModel::Serializer::CollectionSerializer with ActiveModelSerializers::Adapter::Json (1.4ms)
Completed 200 OK in 51ms (Views: 36.3ms | ActiveRecord: 2.1ms)

Started GET "/api/v1/ip_addresses" for ::1 at 2016-11-17 16:58:34 -0700
Processing by Api::V1::IpAddressesController#index as JSON
  IpAddress Load (0.2ms)  SELECT "ip_addresses".* FROM "ip_addresses"
  Entity Load (0.3ms)  SELECT "entities".* FROM "entities" WHERE "entities"."id" IN (1, 2, 3)  ORDER BY "entities"."name" ASC
  IpUse Load (0.2ms)  SELECT "ip_uses".* FROM "ip_uses" WHERE "ip_uses"."id" IN (1, 2)
  IpType Load (0.1ms)  SELECT "ip_types".* FROM "ip_types" WHERE "ip_types"."id" IN (1)
[active_model_serializers] Rendered ActiveModel::Serializer::CollectionSerializer with ActiveModelSerializers::Adapter::Json (2.85ms)
Completed 200 OK in 28ms (Views: 14.8ms | ActiveRecord: 0.9ms)

您还需要创建一个初始化程序，它将路由器注入组件：

export default Ember.Component.extend({
  router: Ember.inject.service('-routing'),

  didInsertElement() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      this.get('router').on('didTransition', function() {
        // didTransition
      });
    });
  }
})

Answer 2

没有任何组件无法侦听路由的didTransition事件，至少不能使用开箱即用的Ember。您可以设置某种pub-sub系统，但我建议不要这样做。

要解决您所面临的问题，您需要找到一种方法，让组件只使用传入其中的数据来执行所需的操作。一般流程是，在转换时，控制器将接收新模型并更新其状态，然后将该状态向下传递到组件，然后组件相应地更新自身。组件的可视显示应该仅基于传递给它的属性，并且当这些属性发生更改时，它应该相应地更新。如果您发现自己必须通过其他方式更新组件，那么您的代码可能过于紧密。

Ember组件可以侦听路由的didTransition操作吗？

2 个答案: