En En

Контроллеры


Контроллеры

Контроллеры ведут себя как специализированный тип компонента, который отображается роутером при переходе по маршруту.

Контроллер получает от роутера единственное свойство (model), которое является возвращаемым значением метода model() маршрута.

Чтобы определить контроллер, запустите команду:

ember generate controller my-controller-name

Значение my-controller-name должно соответствовать имени маршрута, который его отображает. Поэтому маршрут blog-post будет иметь соответствующий контроллер с именем blog-post.

Контроллер стоит генерировать только в том случае, если вы хотите индивидуально настроить его свойства или предоставить какие-либо actions (действия). Если у вас нет настроек, Ember предоставит вам экземпляр контроллера во время выполнения.

Рассмотрим эти концепции с помощью примера маршрута, который показывает публикацию блога. Предположим, что модель BlogPost представлена в шаблоне blog-post.

Модель BlogPost будет иметь примерно такие свойства:

  • title
  • intro
  • body
  • author

Ваш шаблон связывается с этими свойствами в шаблоне blog-post:

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class="intro">
  {{model.intro}}
</div>
<hr>
<div class="body">
  {{model.body}}
</div>

В этом простом примере у нас еще нет каких-либо специфических для отображения свойств или действий. Сейчас наше свойство model контроллера выступает в роли сквозного (или «прокси») для свойств модели. (Помните, что контроллер получает модель, которую представляет, из обработчика своего маршрута.)

Например, мы хотим добавить функцию, которая дает пользователю возможность переключать отображение основного раздела (body). Чтобы сделать это, мы сначала изменим наш шаблон, чтобы показывать body только в том случае, если значение нового свойства isExpanded — true.

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class='intro'>
  {{model.intro}}
</div>
<hr>

{{#if isExpanded}}
  <button {{action "toggleBody"}}>Hide Body</button>
  <div class="body">
    {{model.body}}
  </div>
{{else}}
  <button {{action "toggleBody"}}>Show Body</button>
{{/if}}

Затем вы можете определить действие в рамках hook'а actions контроллера, как мы это делали в компоненте:

app/controllers/blog-post.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    toggleBody() {
      this.toggleProperty('isExpanded');
    }
  }
});

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

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