Question

我有一个地图应用程序，它有一个带有侧边栏信息的全屏地图。这个应用程序有两个路线：

应在地图上显示带标记的地点列表的一条路线，例如/places/
一条路线应显示一个地方，该地点的标记位于地图的中心位置，例如places/1/

我的地图目前是Component，位于application.hbs，因此它位于路线模板的“外部”，并且会在路线更改中保留。它看起来像：

<div class="page">
  <aside class="sidebar">
      {{outlet}}
  </aside>
  <div class="content">
    {{places-map ... }}
  </div>
</div>

我的路线看起来像是：

Router.map(function() {
  this.route('index', { path: '/' });
  this.route('place', { path: "/place/:place_id" });
  this.route('places');
});

所以，虽然我已经完成了所有这些设置和工作（我可以看到一个地方列表并移动一个特定的地方，在两种情况下，地图都在“背景”中），我无法理解我的路线如何将信息提供给我的组件，或者只是我的路由如何与位于其上下文“之外”的组件进行通信？

这是否是Ember的可能模式，有没有办法实现它？

Answer 1

同样关于数据向下动作的@GerDner said。

从顶部开始：

<强>应用/ controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  somethingDownFromController: null
});

<强>应用/ route.js

import Ember from 'ember';

const {
  set
} = Ember;

export default Ember.Route.extend({
  actions: {
    sendSomethingUp(something) {
      set(this.controllerFor('application'), 'somethingDownFromController', something);
    }
  }
});

<强>应用/ template.hbs

<div class="page">
  <aside class="sidebar">
    {{outlet}}
  </aside>
  <div class="content">
    {{places-map
      something=somethingDownFromController
    }}
  </div>
</div>

<强>地点/ route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      somethingFromNestedRoute: 'boooooyaaaaah'
    }
  }
});

<强>地点/ template.hbs

<button {{action 'sendSomethingUp' model.somethingFromNestedRoute}}>
  Send model up
</button>

您可能不需要通过此处冒泡的动作发送任何内容。如果是这种情况，那么您可以从应用程序控制器或路由中获取所需内容并将其传递到places-map。

<强>场所地图/ template.hbs

Insert something from the outer context:
<div>{{something}}</div>

Here's an ember-twiddle。我在router.js文件中做了一些注释，根据应用程序的确切需要，它可能很有用。

Answer 2

数据向下/动作模式就是答案。 http://www.samselikoff.com/blog/data-down-actions-up/

您将数据保存在顶层组件/控制器上，并将数据传递给子组件。数据更改通过子组件上的操作触发，并由顶级组件/控制器通过动作冒泡处理。因此，您只需要一个知道如何更改数据以及如何获取数据的组件/控制器。

控制多个路径上的组件数据

2 个答案: