Я вижу, что в ember есть очень хороший механизм для оборачивания содержимого в компоненте с использованием механизма {{yield}} описанного здесь.
Итак, чтобы использовать пример в документации, у меня может быть шаблон компонента blog-post определенный так:
<script type="text/x-handlebars" id="components/blog-post">
<h1>{{title}}</h1>
<div class="body">{{yield}}</div>
</script>
Затем я могу встроить blog-post в blog-post в любой другой шаблон, используя форму:
{{#blog-post title=title}}
<p class="author">by {{author}}</p>
{{body}}
{{/blog-post}}
У меня вопрос, могу ли я указать два разных {{yield}} в шаблоне компонентов?
Нечто подобное возможно через Named Outlets в Ember.Route#renderTemplate примерно так:
Рули:
<div class="toolbar">{{outlet toolbar}}</div>
<div class="sidebar">{{outlet sidebar}}</div>
JavaScript:
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'sidebar' });
}
});
Я не уверен, что могу использовать этот путь для компонента, который не будет знать, какой шаблон маршрута будет его отображать.
РЕДАКТИРОВАТЬ 1:
Для ясности я пытаюсь реализовать Android Swipe for Action Pattern в качестве компонента Ember.
Итак, я бы хотел, чтобы пользователи этого компонента могли указывать два разных шаблона:
- Шаблон для обычного элемента списка и
- Шаблон для действий, которые обнаруживаются при обнаружении удара по (1).
Я хочу превратить это в компонент, потому что довольно много javascript используется для обработки событий касания (начало/перемещение/конец), в то же время управляя плавной прокруткой списка на основе касания. Пользователи будут предоставлять два шаблона, а этот компонент будет управлять обработкой сенсорных событий и необходимой анимацией.
Мне удалось заставить компонент работать в форме блока, где содержимое блока обрабатывается как (1). Второй шаблон (2) указывается через параметр (actionPartial ниже), который является именем частичного шаблона для действий:
Шаблонный руль: sfa-item.handlebars
<div {{bind-attr class=":sfa-item-actions shouldRevealActions:show" }}>
{{partial actionPartial}}
</div>
<div {{bind-attr class=":sfa-item-details isDragging:dragging shouldRevealActions:moveout"}}>
{{yield}}
</div>
Шаблон вызова руля:
{{#each response in controller}}
<div class="list-group-item sf-mr-item">
{{#sfa-item actionPartial="mr-item-action"}}
<h5>{{response.name}}</h5>
{{/sfa-item}}
</div>
{{/each}}
Где руль mr-item-action определен так:
MR-вещь-action.handlebars:
<div class="sf-mr-item-action">
<button class="btn btn-lg btn-primary" {{action 'sfaClickedAction'}}>Edit</button>
<button class="btn btn-lg btn-primary">Delete</button>
</div>
Проблема в том, что действия от части, предоставленной пользователем, sfaClickedAction выше, не всплывают из компонента. Факт, который упоминается в документах в пункте 4.
Итак, теперь я не знаю, как пользователь мог зафиксировать действия, которые он определил в предоставленном шаблоне действий. Компонент не может перехватить эти действия, потому что он также не знает о них.
РЕДАКТИРОВАТЬ 2
Я задал следующий вопрос здесь
