En En

Передача свойств компоненту


Компоненты изолированы от окружения, поэтому необходимо передавать данные, которые им нужны.

Представьте, что у вас есть компонент blog-post, который используется для отображения публикации блога:

app/templates/components/blog-post.hbs

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{body}}</p>
</article>

Теперь представьте, что у нас есть следующие шаблон и маршрут:

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

Если мы попробуем использовать компонент таким образом:

app/templates/index.hbs

{{#each model as |post|}}
  {{blog-post}}
{{/each}}

отобразится следующий код HTML:

<article class="blog-post">
  <h1></h1>
  <p></p>
</article>

Чтобы свойство стало доступно компоненту, вы должны передать его так:

app/templates/index.hbs

{{#each model as |post|}}
  {{blog-post title=post.title body=post.body}}
{{/each}}

Важно отметить, что эти свойства остаются синхронизированными (технически это называется "привязка"). То есть если значение componentProperty в компоненте меняется, то outerProperty обновится, чтобы отразить это изменение. Возможна и обратная ситуация.

Позиционные параметры

Помимо передачи параметров по имени, вы можете передавать их по позиции. Другими словами, вы можете вызвать компонент выше так:

app/templates/index.hbs

{{#each model as |post|}}
  {{blog-post post.title post.body}}
{{/each}}

Чтобы компонент получил параметры таким образом, нужно установить атрибут positionalParams в классе компонента.

app/components/blog-post.js

import Ember from 'ember';

const BlogPostComponent = Ember.Component.extend({});

BlogPostComponent.reopenClass({
  positionalParams: ['title', 'body']
});

export default BlogPostComponent;

Затем вы можете использовать атрибуты в компоненте, как если бы они были переданы в виде {{blog-post title=post.title body=post.body}}.

Обратите внимание, что свойство positionalParams добавлено к классу в качестве статической переменной через reopenClass. Позиционные параметры всегда объявляются в классе компонента, и их нельзя изменить, пока приложение выполняется.

В качестве альтернативы вы можете принять произвольное число параметров, если установите positionalParams в строке, например: positionalParams: 'params'. Это позволит получить доступ к этим параметрам как к массиву:

app/components/blog-post.js

import Ember from 'ember';

const BlogPostComponent = Ember.Component.extend({
  title: Ember.computed('params.[]', function(){
    return this.get('params')[0];
  }),
  body: Ember.computed('params.[]', function(){
    return this.get('params')[1];
  })
});

BlogPostComponent.reopenClass({
  positionalParams: 'params'
});

export default BlogPostComponent;

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

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