具有相同操作的 Ember DRY 嵌套组件答案

【问题标题】：Ember DRY nested components with same actions具有相同操作的 Ember DRY 嵌套组件
【发布时间】：2015-10-18 04:05:59
【问题描述】：

现在我正在我的 ember 应用程序中构建一个特定的屏幕，具有未知数量的嵌套组件。正因为如此，我试图不根据显示的组件更改 url 还有一些基本信息我想在每个子屏幕上显示。

目前，当真正的动作逻辑仅在路线上定义时，我似乎必须重新定义并在所有这些动作名称中传递所有这些动作名称。有没有办法干燥这些动作引用可能在一个控制器或一个“父”组件中。

这里是一个 ember-twiddle 示例，我将这些组件渲染到一个插座 http://ember-twiddle.com/31a69c62ceddcb69b02b

这里是路线示例

import Ember from 'ember';

export default Ember.Route.extend({
  _fixtureModels: [
    { person: {name: 'bill'}, sideModel: null},
    { person: {name: 'bill'}, sideModel: { postName: 'test post' }},
    { person: {name: 'bill'}, sideModel: { commentName: 'test comment'}}
    ],

  _renderSideModel: function (template, sideModel) {
    this.render();

    this.render(template, {
      outlet: 'side-model',
      into: 'index',
      model: sideModel
    });
  },

  renderTemplate: function () {
    this.render();

   this.render('someComponentWrapper', {
     outlet: 'side-model',
     into: 'index'
   });
  },

  model: function () {
     return this._fixtureModels[0];
  },

  actions: {
    renderTopLevel: function () {
      return this.renderTemplate();
    },
    renderPost: function () {
      return this._renderSideModel('post', this._fixtureModels[1]);
    },
    renderComment: function () {
      return this._renderSideModel('comment', this._fixtureModels[2]);
    }
  }
});

我知道 URL 应该是 Ember 中的王者，这是非常有罪的，但是很难重建一个潜在的嵌套视图。

【问题讨论】：

从技术上讲，您的组件操作应该以控制器和路由结束。您还可以从组件中指定目标对象
@abFx 组件操作不会冒泡。
@BillPull 感谢您使用 Ember Twiddle。请务必留下反馈。
@Gaurav 看看这个...ember-twiddle.com/dd5b9636b5ced43dd440

标签： ember.js ember-cli ember-router ember-components

【解决方案1】：

因此，您必须重新定义所有这些操作名称的原因是因为组件被设计为隔离的，即可以在任何地方重用。但是，您可以使用两个快捷方式：

应用默认操作名称：

您可以在组件中使用默认操作名称，以避免在每个模板中都指定它。

// components/some-component.js

export default Ember.Component.extend({
    renderPost: "renderPost",
    renderComment: "renderComment"
});

// some template where you are using this component

{{some-component-wrapper renderPost="myRenderPost"}}
{{!overrides renderPost, but "inherits" an action named renderComment}}

使用关闭操作（如果您使用的是 Ember 1.13 或更高版本）：

见http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_closure-actions

这是一项新功能，可让您向下传递函数而不是操作的名称。

【讨论】：