En En

Основы Handlebars


В Ember используется библиотека шаблонов Handlebars для работы пользовательского интерфейса приложения. Шаблоны Handlebars содержат статический код HTML и динамический контент внутри выражений Handlebars, которые заключаются в фигурные скобки: {{}}.

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

Отображение свойств

Шаблоны поддерживаются контекстом. Контекст — объект, из которого выражения Handlebars считывают свойства. В Ember этим объектом часто служит компонент. Для шаблонов, которые отображает маршрут (например, application.hbs), контекстом служит контроллер.

Например, этот шаблон application.hbs отобразит имя и фамилию:

app/templates/application.hbs

Hello, <strong>{{firstName}} {{lastName}}</strong>!

Свойства firstName и lastName считываются из контекста (в этом случае из контроллера application), и отображаются внутри тега HTML <strong>.

Чтобы предоставить firstName и lastName для шаблона выше, свойства необходимо добавить в контроллер application. Если вы используете Ember CLI, то вам, возможно, понадобится создать этот файл:

app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

Вышеуказанные шаблон и контроллер отобразят такой HTML:

Hello, <strong>Trek Glowacki</strong>!

Помните, что {{firstName}} и {{lastName}} — связанные данные. Это значит, что если значение одного из этих свойств меняется, то модель DOM автоматически обновляется.

По мере разработки приложения в нем будет все больше шаблонов, которые поддерживаются контроллерами и компонентами.

Хелперы

Ember позволяет вам писать собственные хелперы, чтобы использовать минимум логики в обработке шаблонов.

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

app/helpers/sum.js

import Ember from 'ember';

export function sum(params) {
  return params.reduce((a, b) => {
    return a + b;
  });
};

export default Ember.Helper.helper(sum);

Код выше позволяет вызывать функцию sum() в шаблонах в качестве хелпера handlebars {{sum}}:

<p>Total: {{sum 1 2 3}}</p>

Этот хелпер вернет значение 6.

В Ember есть встроенные хелперы, которые мы рассмотрим в следующих главах.

Вложенные хелперы

Хелперы можно вкладывать в вызовы других хелперов и компонентов.

Это позволяет вычислять значение до того, как оно будет передано в качестве аргумента или атрибута другого хелпера.

Нельзя вложить фигурные скобки {{}}, поэтому хелпер вкладывают с помощью круглых скобок ():

{{sum (multiply 2 4) 2}}

В этом примере мы используем хелпер, чтобы умножить 2 на 4 до передачи значения в {{sum}}.

Результат этих сгруппированных хелперов будет равен 10.

По мере изучения этого раздела помните, что хелпер можно использовать там, где можно использовать нормальное значение.

Многие из встроенных хелперов Ember (как и пользовательские хелперы) можно использовать во вложенной форме.


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

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