Ember 2 Routable Components

Question

在Ember 2.2 Canary中将初始属性传递给可路由组件的首选方法是什么？

RFC（https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md#specifying-component-attributes）中描述的方式似乎不起作用。

Answer 1

编辑：在Ember 2.7及更高版本中有一个插件可启用可路由组件：https://github.com/mdehoog/ember-routable-components-shim

目前，只有一小部分可路由组件RFC在Ember Canary中实现。 attributes挂钩尚未实现。传递给可路由组件的唯一事情是从model挂钩返回的模型。

以下是一个示例实现：

1. 创建可路由组件（而不是控制器）。它必须是isGlimmerComponent：

   // components/post.js
   import Ember from 'ember';
   
   export default Ember.Component.extend({
     isGlimmerComponent: true,
     componentProperty: 'componentValue'
   });
   

2. 创建可路由组件的模板：

   {{!-- templates/components/post.hbs --}}
   Model property: {{model.modelProperty}}<br/>
   Component property: {{componentProperty}}
   

3. 创建一个呈现可路由组件的路径：

   // routes/post.js
   import Ember from 'ember';
   
   export default Ember.Route.extend({
     renderTemplate: function () {
       this.render({component: this.routeName}); //or you can explicitly name your component here
     },
     model: function () {
       return {
         modelProperty: 'modelValue'
       };
     }
   });
   

4. 正常添加路由到router.js：

   // router.js
   Router.map(function() {
     this.route('post', { path: '/post' });
   });
   

5. 现在，访问/发布应该呈现可路由的组件。