Ember DRY вложенные компоненты с одинаковыми действиями

Question

Прямо сейчас я создаю определенный экран в своем приложении ember, в котором есть неизвестное количество вложенных компонентов. Из-за этого я стараюсь не изменять URL-адрес на основе показанного компонента, а также есть некоторая базовая информация, которую я хочу отображать на каждом подэкране.

В настоящее время кажется, что я должен переопределить и передать все эти имена действий везде, когда логика реального действия определена только на маршруте. Есть ли способ высушить эти ссылки действий, возможно, в контроллере или один "родительский" компонент.

вот пример тлеющего угасания, где я рендеринг этих компонентов в розетку 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, и это довольно греховно, но было бы очень трудно восстановить потенциально вложенное представление.

Answer 1

Таким образом, причина, по которой вы должны переопределить все эти имена действий, заключается в том, что компоненты предназначены для изоляции, то есть повторного использования в любом месте. Есть, однако, два ярлыка, которые вы можете использовать:

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}}

2. Используйте закрывающие действия (если вы используете Ember 1.13 или более позднюю версию):

См. http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html

Это новая функция, которая позволяет вам передавать функцию, а не имя действия.