Эта статья была рецензирована Стефаном Максом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Ember — это инфраструктура JavaScript, основанная на шаблоне модель-представление-контроллер (MVC) и используемая для создания одностраничных приложений. Недавно была выпущена версия 2.0 фреймворка под девизом «Стабильность без застоя». Это означает, что Ember 2.0 не поставлялся с какими-либо новыми функциями, поскольку те функции, которые предназначались для выпуска 2.0 (например, механизм рендеринга Glimmer), уже присутствовали в предыдущих версиях.
Ember 2.0 также удаляет многие старые API, которые были устаревшими в версиях 1.x. Это означает, что если вы сможете создать приложение Ember 1.13, в котором нет предупреждений об устаревании, обновление до 2.0 будет проходить без проблем. Это резко контрастирует с прошлым анонсом Angular 2.0 .
Команда Ember назвала функции, предназначенные для Ember 2.0, «функциями-предшественниками». Итак, в оставшейся части этой статьи я расскажу об основных возможностях предшественников и о том, как их использовать. Мы также рассмотрим некоторые функции, предназначенные для будущих выпусков.
Если вы хотите следовать, вам нужно создать проект Ember, используя последнюю версию фреймворка. Покажи мне как .
Ember устанавливается с помощью npm. Об учебнике по npm вы можете посмотреть здесь .
npm install -g ember-cliНа момент написания этого будет тянуть в версии 1.13
ember -v
=> version: 1.13.8
Затем создайте новое приложение Ember:
ember new hello-world
Перейдите в этот каталог и отредактируйте файл bower.json
{
"name": "hello-world",
"dependencies": {
"ember": "^2.0.0",
"ember-data": "^2.0.0",
...
}
}
Вернемся в терминал запустить:
bower install
Бауэр может попросить вас указать версию для Ember. Выберите версию 2.x из предоставленного списка и добавьте к ней восклицательный знак, чтобы сохранить разрешение bower.json
Следующий запуск сервера разработки Ember CLI:
ember server
Наконец, перейдите по адресу http: // localhost: 4200 / и проверьте версию консоли вашего браузера.
Особенности предшественника для Ember 2.0
Взгляды
Взгляды устарели в пользу компонентов. Состоящие из двух частей (файл компонента JavaScript и шаблон Handlebars), компоненты изолированы по дизайну и лучше подходят для повторного использования в вашем приложении (в отличие от представлений). Доступен аддон совместимости, который будет поддерживаться командой Ember до версии 2.6 Ember. Это делается для того, чтобы помочь приложениям, интенсивно использующим представления, перейти на последнюю версию Ember. Совместимость этого аддона с Ember остановится на версии 2.4. При создании новых приложений Ember разработчики должны отдавать предпочтение компонентам над представлениями.
ArrayController и ObjectController
ArrayControllerObjectControllerController Это вызвано тем, что они создали некоторую ненужную путаницу среди разработчиков, и возникла неоднозначность относительно того, какой тип контроллера генерируется Ember, если он не указан. С этим устареванием будет только один тип контроллера.
Чтобы сделать этот переход, измените код, который выглядит следующим образом:
exports default Ember.ObjectController.extend({
или:
exports default Ember.ArrayController.extend({
чтобы:
exports default Ember.Controller.extend({
Аддон контроллера также поддерживается до Ember 2.6, чтобы помочь переходным приложениям.
Привязки атрибутов
В прошлом помощник {{bind-attr}} С Ember 2.0 вам больше не нужен этот помощник. Вместо того, чтобы делать что-то вроде:
<a {{bind-attr href=location }} >Link Text</a>
Теперь вы можете сделать что-то вроде этого, что намного лучше и понятнее
<a href={{location}} >Link Text</a>
Привязки класса
Привязка классов к свойствам теперь стала проще благодаря устареванию помощника {{bind-attr}} Например, вместо этого
<div {{bind-attr class="isVisible"}} ></div>
Теперь вы можете сделать это
<div class='{{if isVisible "is-visible" }}' ></div>
Параметры просмотра и контроллера на каждом помощнике
Следующие свойства itemViewitemViewClasstagNameemptyViewemptyViewClassitemController Это были параметры, которые вы могли установить при использовании помощника {{each}} Это устаревание является результатом перехода от представлений и контроллеров к компонентам.
Достаточно сказать, что компоненты предлагают все функции, предоставляемые этими опциями. Например:
{{each view.comments itemController="comment"
itemView="commentView"
emptyView="noCommentsView"
tagName="ul"}}
будет выглядеть так:
<ul>
{{#each comments as |comment|}}
{{post-comment comment=comment}}
{{else}}
{{no-comments}}
{{/each}}
</ul>
Узнайте больше об этом изменении .
Блок Params
Блочные параметры были введены. Это помогает с единообразием и знакомством при использовании нескольких помощников руля. Например, при использовании помощника {{each}}
{{#each person in people}}
сейчас становится
{{#each people as |person| }}
Что касается помощника {{with}}
{{#with teacher as person}}
сейчас становится
{{#with teacher as |person| }}
Узнайте больше об этом изменении
Требуется контроллер
Свойство needs Это используется для предоставления контроллеру доступа к другому контроллеру. Теперь вы можете установить имя контроллера как свойство с введенным значением. Итак, этот код
exports default Ember.Controller.extend({
needs: ['application']
})
изменения в:
exports default Ember.Controller.extend({
application: Ember.inject.controller()
})
Теперь вы можете получить доступ к введенному контроллеру как к application Это короче по сравнению с более длинными формами controllers.application
Аргументы наблюдателя
Аргументы наблюдателя теперь будут в обратном порядке. Раньше функция была первым аргументом, за которым следовали зависимые свойства. Теперь у нас будет функция в качестве последнего аргумента вместо того, чтобы быть первым. Так по сути этот код
Ember.observer(function(){
}, 'someProperty1', 'someProperty2')
становится
Ember.observer('someProperty1', 'someProperty2', function(){
})
Поддержка IE8
Поддержка Internet Explorer 8 была прекращена в Ember 2.0. Отныне будет поддерживаться только Internet Explorer 9 и выше. Были даже разговоры об отказе от поддержки IE9 , но после значительных дебатов было решено, что преимущества отказа от IE9 в Ember 2.0 были не такими сильными.
Особенности Канарских островов в Post Ember 2.0
Вот некоторые из особенностей, которые можно ожидать, когда новые версии Ember поставляются. На данный момент они являются экспериментальными и находятся только в сборке канареек. Чтобы использовать их, вам нужно зарегистрироваться, используя свойство FEATURES Список доступных функций можно найти здесь .
Угловые компоненты
Синтаксис угловой скобки для компонентов был реализован. Это позволяет вызывать компоненты в том же стиле, что и обычные элементы HTML. Таким образом, вы можете изменить следующий код из
{{#my-component}}{{/my-component}}
чтобы:
<my-component></my-component>
Старый синтаксис все еще будет работать вместе с новым, чтобы дать разработчикам существующих приложений достаточно времени для обновления. В дополнение к более чистому синтаксису компоненты угловых скобок представят односторонний поток данных по умолчанию ( который вы, возможно, знаете из React ) и обеспечите поддержку двустороннего потока данных.
Односторонний поток данных и ключевое слово Mut
В предыдущих версиях Ember свойства компонентов связывались двумя способами. Это означает, что свойство компонента, а также его источника данных являются изменяемыми. В Ember 2.0 свойства компонентов теперь неизменны по умолчанию. Такое поведение является следствием использования нового синтаксиса угловых скобок для компонентов. Например, в приведенном ниже коде используется старый метод для вызова компонента.
{{#my-component firstName=model.name }}{{/my-component}}
Свойство firstNamename Когда значение свойства namefirstName Аналогично, мы можем изменить свойство firstNamename
С новым синтаксисом (как показано ниже) мы можем изменять только значение свойства name Мы не можем изменить значение свойства firstName
<my-component firstName=model.name ></my-component>
Однако есть новое ключевое слово mut
<my-component firstName={{mut model.name}} ></my-component>
Это ключевое слово делает свойство firstName Во-первых, функция с именем update
this.attrs.firstName.update("newFirstNameValue");
Во-вторых, свойство называется value Это содержит фактическую стоимость имущества и доступно как
this.attrs.firstName.value;
Свойство Attrs в компонентах
Еще одна особенность, представленная новыми угловыми скобками, — это свойство attr Любое свойство, переданное во время вызова, не будет непосредственно присутствовать в компоненте, а скорее в свойстве компонента, называемом attr Например, когда мы вызываем этот компонент:
<my-component property1="somevalue" property2="someothervalue" >
</my-component>
В прошлом вы могли получить доступ к двум свойствам, как это.
this.get('property1')
this.get('property2')
но с новым синтаксисом вы должны получить к ним доступ, как так
this.attrs.property1
this.attrs.property2
Быстрая перерисовка в стиле React
В предыдущих версиях Ember рендеринг компонента раньше был вычислительно дорогой операцией. Эмбер раньше разрушал весь DOM для компонента и восстанавливал его с нуля. В новом движке под названием Glimmer функция rerender Он перестраивает только ту часть DOM, которую нужно изменить. Это позволяет проводить более быстрые и эффективные повторные рендеры.
Вывод
Ember 2.0, безусловно, шаг в правильном направлении. Особое внимание уделяется единообразию и соблюдению веб-стандартов, что делает Ember более сильным конкурентом в качестве фреймворка JavaScript для вашего следующего нового проекта. Дайте нам знать ваши мысли об этих новых интересных функциях в комментариях ниже.
И для тех из вас, кто хочет углубиться в это, я рекомендую посмотреть на открытии Keynote Тома Дейла и Иегуда Каца на EmberConf2015 обо всем, что произошло на пути к Ember 2.0. Наслаждайтесь!