En En

Использование блочных параметров


В компонентах могут быть переданные свойства (Передача свойств компоненту), но они также могут возвращать выходные значения при использовании в блочном выражении.

Возврат значений из компонента с помощью yield

app/templates/index.hbs

{{blog-post post=model}}

app/templates/components/blog-post.hbs

{{yield post.title post.body post.author}}

Здесь целая модель публикации блога была передана компоненту в качестве свойства отдельного компонента. В свою очередь, компонент возвращает значения с помощью yield. В данном случае значения были получены из переданной модели post, но можно предоставить все, к чему компонент имеет доступ, например внутреннее свойство или что-либо из службы.

Использование предоставленных значений с блочными параметрами

В блочном выражении можно применять блочные параметры, чтобы привязывать имена к любым предоставленным значениям для использования в блоке. Это позволяет индивидуально настраивать шаблон при использовании компонента, когда разметка предоставляется используемым шаблоном, но любое поведение при обработке события, реализованное в компоненте, сохраняется, например поведение обработчиков click().

app/templates/index.hbs

{{#blog-post post=model as |title body author|}}
  <h2>{{title}}</h2>
  <p class="author">by {{author}}</p>
  <div class="post-body">{{body}}</p>
{{/blog-post}}

Имена привязываются в том порядке, в котором они передаются yield в шаблоне компонента.

Поддержка блочного и не блочного компонента в одном шаблоне

С помощью свойства hasBlock возможно использовать компонент в блочном и не блочном виде в одном шаблоне.

app/templates/components/blog-post.hbs

{{#if hasBlock}}
  {{yield post.title}}
  {{yield post.body}}
  {{yield post.author}}
{{else}}
  <h1>{{post.title}}</h1>
  <p class="author">Authored by {{post.author}}</p>
  <p>{{post.body}}</p>
{{/if}}

В итоге предоставляется исходный шаблон при использовании компонента в не блочной форме, но при использовании блочного выражения предоставляются значения для применения с блочными параметрами.


Комментарии (0)

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.