From db7e657cad0a841b716b5d201f41b2e3384a680d Mon Sep 17 00:00:00 2001 From: Ricardo Mendes Date: Thu, 27 Jul 2017 07:14:45 +0100 Subject: [PATCH] use file path and add imports Used RFC #176 modules API for imports. --- .../lib/system/application.js | 4 +- .../ember-application/lib/system/engine.js | 2 +- packages/ember-glimmer/lib/component.js | 74 +++++----- packages/ember-glimmer/lib/helper.js | 26 ++-- packages/ember-glimmer/lib/helpers/action.js | 31 +++-- .../ember-glimmer/lib/helpers/component.js | 10 +- .../ember-glimmer/lib/helpers/readonly.js | 8 +- packages/ember-glimmer/lib/index.js | 20 +-- packages/ember-glimmer/lib/syntax/outlet.js | 7 +- packages/ember-metal/lib/run_loop.js | 6 +- packages/ember-routing/lib/system/route.js | 129 +++++++++--------- .../ember-runtime/lib/mixins/observable.js | 6 +- .../ember-runtime/lib/system/native_array.js | 6 +- packages/ember-utils/lib/owner.js | 13 +- .../ember-views/lib/mixins/action_support.js | 28 ++-- .../ember-views/lib/mixins/view_support.js | 38 ++++-- 16 files changed, 229 insertions(+), 179 deletions(-) diff --git a/packages/ember-application/lib/system/application.js b/packages/ember-application/lib/system/application.js index 8c9e8876806..ce9e3338d4c 100644 --- a/packages/ember-application/lib/system/application.js +++ b/packages/ember-application/lib/system/application.js @@ -932,11 +932,11 @@ const Application = Engine.extend({ ``` ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; // An example of how the (hypothetical) service is used in routes. - export default Ember.Route.extend({ + export default Route.extend({ model(params) { return this.network.fetch(`/api/posts/${params.post_id}.json`); }, diff --git a/packages/ember-application/lib/system/engine.js b/packages/ember-application/lib/system/engine.js index 5e18ef02b4f..bfba35c1f20 100644 --- a/packages/ember-application/lib/system/engine.js +++ b/packages/ember-application/lib/system/engine.js @@ -188,7 +188,7 @@ Engine.reopenClass({ This must be a unique name, as trying to register two initializers with the same name will result in an error. - ```javascript + ```app/initialize/named-initializer.js Ember.Application.initializer({ name: 'namedInitializer', diff --git a/packages/ember-glimmer/lib/component.js b/packages/ember-glimmer/lib/component.js index e6f6387de81..07ef2a66412 100644 --- a/packages/ember-glimmer/lib/component.js +++ b/packages/ember-glimmer/lib/component.js @@ -84,9 +84,9 @@ export const BOUNDS = symbol('BOUNDS'); `hello` for the `person-profile` component: ```app/components/person-profile.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ actions: { hello(name) { console.log("Hello", name); @@ -118,9 +118,9 @@ export const BOUNDS = symbol('BOUNDS'); The following component class: ```app/components/emphasized-paragraph.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'em' }); ``` @@ -138,9 +138,9 @@ export const BOUNDS = symbol('BOUNDS'); `classNames` property that is set to an array of strings: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNames: ['my-class', 'my-other-class'] }); ``` @@ -157,9 +157,9 @@ export const BOUNDS = symbol('BOUNDS'); attribute. These properties can be computed properties: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['propertyA', 'propertyB'], propertyA: 'from-a', propertyB: Ember.computed(function() { @@ -179,9 +179,9 @@ export const BOUNDS = symbol('BOUNDS'); The class name will not be added if the value is `false` or `undefined`. ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['hovered'], hovered: true }); @@ -198,9 +198,9 @@ export const BOUNDS = symbol('BOUNDS'); preferred value after a ":" character when defining the binding: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['awesome:so-very-cool'], awesome: true }); @@ -216,9 +216,9 @@ export const BOUNDS = symbol('BOUNDS'); camelCase-style format will be converted to a dasherized format: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['isUrgent'], isUrgent: true }); @@ -234,9 +234,9 @@ export const BOUNDS = symbol('BOUNDS'); traversing a path relative to the component itself: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['messages.empty'], messages: Ember.Object.create({ empty: true @@ -255,9 +255,9 @@ export const BOUNDS = symbol('BOUNDS'); like this: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['isEnabled:enabled:disabled'], isEnabled: true }); @@ -279,10 +279,10 @@ export const BOUNDS = symbol('BOUNDS'); This syntax offers the convenience to add a class if a property is `false`: ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; // Applies no class when isEnabled is true and class 'disabled' when isEnabled is false - export default Ember.Component.extend({ + export default Component.extend({ classNameBindings: ['isEnabled::disabled'], isEnabled: true }); @@ -318,9 +318,9 @@ export const BOUNDS = symbol('BOUNDS'); HTML associated attribute: ```app/components/my-anchor.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'a', attributeBindings: ['href'], href: 'http://google.com' @@ -337,9 +337,9 @@ export const BOUNDS = symbol('BOUNDS'); the source property and the destination property: ```app/components/my-anchor.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'a', attributeBindings: ['url:href'], url: 'http://google.com' @@ -356,9 +356,9 @@ export const BOUNDS = symbol('BOUNDS'); mapped, since `:` is not a valid character for properties in Javascript: ```app/components/my-use.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'use', attributeBindings: ['xlinkHref:xlink:href'], xlinkHref: '#triangle' @@ -375,9 +375,9 @@ export const BOUNDS = symbol('BOUNDS'); the attribute will be present or absent depending on the value: ```app/components/my-text-input.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'], disabled: false @@ -393,9 +393,9 @@ export const BOUNDS = symbol('BOUNDS'); `attributeBindings` can refer to computed properties: ```app/components/my-text-input.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'input', attributeBindings: ['disabled'], disabled: Ember.computed(function() { @@ -412,9 +412,9 @@ export const BOUNDS = symbol('BOUNDS'); return value of the `attributeBindings` monitored property: ```app/components/my-text-input.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ tagName: 'form', attributeBindings: ['novalidate'], novalidate: null @@ -442,10 +442,10 @@ export const BOUNDS = symbol('BOUNDS'); ``` ```app/components/person-profile.js - import Ember from 'ember'; + import Component from '@ember/component'; import layout from '../templates/components/person-profile'; - export default Ember.Component.extend({ + export default Component.extend({ layout }); ``` @@ -475,9 +475,9 @@ export const BOUNDS = symbol('BOUNDS'); argument to this method. ```app/components/my-widget.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ click(event) { // will be called when an instance's // rendered element is clicked @@ -879,7 +879,7 @@ const Component = CoreView.extend( instantiated: ```javascript - export default Ember.Component.extend({ + export default Component.extend({ init() { this._super(...arguments); diff --git a/packages/ember-glimmer/lib/helper.js b/packages/ember-glimmer/lib/helper.js index 22a1b66f404..78435b72826 100644 --- a/packages/ember-glimmer/lib/helper.js +++ b/packages/ember-glimmer/lib/helper.js @@ -27,8 +27,10 @@ export const RECOMPUTE_TAG = symbol('RECOMPUTE_TAG'); Helpers defined using a class must provide a `compute` function. For example: - ```js - export default Ember.Helper.extend({ + ```app/helpers/format-currency.js + import Helper from '@ember/component/helper'; + + export default Helper.extend({ compute(params, hash) { let cents = params[0]; let currency = hash.currency; @@ -64,11 +66,14 @@ var Helper = FrameworkObject.extend({ For example, this component will rerender when the `currentUser` on a session service changes: - ```js - // app/helpers/current-user-email.js - export default Ember.Helper.extend({ - session: Ember.inject.service(), - onNewUser: Ember.observer('session.currentUser', function() { + ```app/helpers/current-user-email.js + import Helper from '@ember/component/helper' + import { inject as service } from '@ember/service' + import { observer } from '@ember/object' + + export default Helper.extend({ + session: service(), + onNewUser: observer('session.currentUser', function() { this.recompute(); }), compute() { @@ -105,9 +110,10 @@ Helper.reopenClass({ The `helper` method create pure-function helpers without instances. For example: - ```js - // app/helpers/format-currency.js - export default Ember.Helper.helper(function(params, hash) { + ```app/helpers/format-currency.js + import { helper } from '@ember/component/helper'; + + export default helper(function(params, hash) { let cents = params[0]; let currency = hash.currency; return `${currency}${cents * 0.01}`; diff --git a/packages/ember-glimmer/lib/helpers/action.js b/packages/ember-glimmer/lib/helpers/action.js index 1c8c483a63f..178937096a8 100644 --- a/packages/ember-glimmer/lib/helpers/action.js +++ b/packages/ember-glimmer/lib/helpers/action.js @@ -66,10 +66,10 @@ export const ACTION = symbol('ACTION'); Here is an example action handler on a component: - ```js - import Ember from 'ember'; + ```app/components/my-component.js + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ actions: { save() { this.get('model').save(); @@ -98,8 +98,10 @@ export const ACTION = symbol('ACTION'); additional arguments are passed to the action function. This has interesting properties combined with currying of arguments. For example: - ```js - export default Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ actions: { // Usage {{input on-input=(action (action 'setName' model) value="target.value")}} setName(model, name) { @@ -118,9 +120,9 @@ export const ACTION = symbol('ACTION'); with `on-input` above. For example: ```app/components/my-input.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ actions: { setName(model, name) { model.set('name', name); @@ -134,9 +136,9 @@ export const ACTION = symbol('ACTION'); ``` ```app/components/my-component.js - import Ember from 'ember'; + import Component from '@ember/component'; - export default Ember.Component.extend({ + export default Component.extend({ click() { // Note that model is not passed, it was curried in the template this.sendAction('submit', 'bob'); @@ -192,7 +194,7 @@ export const ACTION = symbol('ACTION'); ``` ```app/helpers/disable-bubbling.js - import Ember from 'ember'; + import { helper } from '@ember/component/helper' export function disableBubbling([action]) { return function(event) { @@ -200,7 +202,7 @@ export const ACTION = symbol('ACTION'); return action(event); }; } - export default Ember.Helper.helper(disableBubbling); + export default helper(disableBubbling); ``` If you need the default handler to trigger you should either register your @@ -257,10 +259,11 @@ export const ACTION = symbol('ACTION'); ``` ```app/controllers/application.js - import Ember from 'ember'; + import Controller from '@ember/controller'; + import { inject as service } from '@ember/service'; - export default Ember.Controller.extend({ - someService: Ember.inject.service() + export default Controller.extend({ + someService: inject.service() }); ``` diff --git a/packages/ember-glimmer/lib/helpers/component.js b/packages/ember-glimmer/lib/helpers/component.js index addc7567f07..e3cda2f3d92 100644 --- a/packages/ember-glimmer/lib/helpers/component.js +++ b/packages/ember-glimmer/lib/helpers/component.js @@ -34,7 +34,10 @@ import { DEBUG } from 'ember-env-flags'; And the following application code: ```app/controllers/application.js - export default Ember.Controller.extend({ + import Controller from '@ember/controller'; + import { computed } from '@ember/object'; + + export default Controller.extend({ infographicComponentName: computed('isMarketOpen', { get() { if (this.get('isMarketOpen')) { @@ -72,7 +75,10 @@ import { DEBUG } from 'ember-env-flags'; The following controller code: ```app/controllers/application.js - export default Ember.Controller.extend({ + import Controller from '@ember/controller'; + import { computed } from '@ember/object'; + + export default Controller.extend({ lastUpdateTimestamp: computed(function() { return new Date(); }), diff --git a/packages/ember-glimmer/lib/helpers/readonly.js b/packages/ember-glimmer/lib/helpers/readonly.js index 1991019e19b..355e466a3d7 100644 --- a/packages/ember-glimmer/lib/helpers/readonly.js +++ b/packages/ember-glimmer/lib/helpers/readonly.js @@ -59,7 +59,9 @@ import { unMut } from './mut'; First let's set up the parent component: ```app/components/my-parent.js - export default Ember.Component.extend({ + import Component from '@ember/component'; + + export default Component.extend({ clicks: null, init() { @@ -77,7 +79,9 @@ import { unMut } from './mut'; Now, if you update the `total` property of `childClicks`: ```app/components/my-child.js - export default Ember.Component.extend({ + import Component from '@ember/component'; + + export default Component.extend({ click() { this.get('clicks').incrementProperty('total'); } diff --git a/packages/ember-glimmer/lib/index.js b/packages/ember-glimmer/lib/index.js index 794f008b66e..2f0cabebee7 100644 --- a/packages/ember-glimmer/lib/index.js +++ b/packages/ember-glimmer/lib/index.js @@ -7,13 +7,15 @@ the DOM) to a user. For example, given a component with the property "name", that component's template can use the name in several ways: - ```app/components/person.js - export default Ember.Component.extend({ - name: 'Jill' - }); + ```app/components/person-profile.js + import Component from '@ember/component'; + + export default Component.extend({ + name: 'Jill' + }); ``` - ```app/components/person.hbs + ```app/components/person-profile.hbs {{name}}
{{name}}
@@ -119,13 +121,13 @@ When designing components `{{yield}}` is used to denote where, inside the component's template, an optional block passed to the component should render: - ```application.hbs + ```app/templates/application.hbs {{#labeled-textfield value=someProperty}} First name: {{/labeled-textfield}} ``` - ```components/labeled-textfield.hbs + ```app/templates/components/labeled-textfield.hbs @@ -141,7 +143,7 @@ Additionally you can `yield` properties into the context for use by the consumer: - ```application.hbs + ```app/templates/application.hbs {{#labeled-textfield value=someProperty validator=(action 'firstNameValidator') as |validationError|}} {{#if validationError}}

{{ValidationError}}

@@ -150,7 +152,7 @@ {{/labeled-textfield}} ``` - ```components/labeled-textfield.hbs + ```app/templates/components/labeled-textfield.hbs diff --git a/packages/ember-glimmer/lib/syntax/outlet.js b/packages/ember-glimmer/lib/syntax/outlet.js index 91f2c2ae40c..e7c48767f76 100644 --- a/packages/ember-glimmer/lib/syntax/outlet.js +++ b/packages/ember-glimmer/lib/syntax/outlet.js @@ -101,9 +101,10 @@ function outletComponentFor(vm, args) { Your routes can then render into a specific one of these `outlet`s by specifying the `outlet` attribute in your `renderTemplate` function: - ```javascript - // app/routes/menu.js - export default Ember.Route.extend({ + ```app/routes/menu.js + import Route from '@ember/routing/route'; + + export default Route.extend({ renderTemplate() { this.render({ outlet: 'menu' }); } diff --git a/packages/ember-metal/lib/run_loop.js b/packages/ember-metal/lib/run_loop.js index c379d6f094c..77c327d2c7e 100644 --- a/packages/ember-metal/lib/run_loop.js +++ b/packages/ember-metal/lib/run_loop.js @@ -445,8 +445,10 @@ run.scheduleOnce = function(/*queue, target, method*/) { Example: - ```javascript - export default Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export Component.extend({ didInsertElement() { this._super(...arguments); run.scheduleOnce('afterRender', this, 'processChildElements'); diff --git a/packages/ember-routing/lib/system/route.js b/packages/ember-routing/lib/system/route.js index 66793dfbaa3..a69608c543f 100644 --- a/packages/ember-routing/lib/system/route.js +++ b/packages/ember-routing/lib/system/route.js @@ -340,7 +340,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/member.js - export default Ember.Route.extend({ + import Route from '@ember/routing/route'; + + export default Route.extend({ queryParams: { memberQp: { refreshModel: true } } @@ -348,7 +350,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/member/interest.js - export default Ember.Route.extend({ + import Route from '@ember/routing/route'; + + export default Route.extend({ queryParams: { interestQp: { refreshModel: true } }, @@ -449,9 +453,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { changes or the route is exiting. ```app/routes/articles.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ resetController(controller, isExiting, transition) { if (isExiting) { controller.set('page', 1); @@ -509,9 +513,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { template. ```app/routes/posts/list.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ templateName: 'posts/list' }); ``` @@ -568,9 +572,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { half-filled out: ```app/routes/contact-form.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { willTransition(transition) { if (this.controller.get('userHasEnteredData')) { @@ -611,9 +615,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { state on the controller. ```app/routes/login.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { didTransition() { this.controller.get('errors.base').clear(); @@ -635,7 +639,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { triggered the loading event is the second parameter. ```app/routes/application.js - export default Ember.Route.extend({ + import Route from '@ember/routing/route'; + + export default Route.extend({ actions: { loading(transition, route) { let controller = this.controllerFor('foo'); @@ -668,9 +674,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { as well as any unhandled errors from child routes: ```app/routes/admin.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ beforeModel() { return Ember.RSVP.reject('bad things!'); }, @@ -699,9 +705,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { `error` handler on `ApplicationRoute`: ```app/routes/application.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { error(error, transition) { this.controllerFor('banner').displayError(error.message); @@ -721,9 +727,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { not executed when the model for the route changes. ```app/routes/application.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ collectAnalytics: Ember.on('activate', function(){ collectAnalytics(); }) @@ -740,9 +746,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { route. It is not executed when the model for the route changes. ```app/routes/index.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ trackPageLeaveAnalytics: Ember.on('deactivate', function(){ trackPageLeaveAnalytics(); }) @@ -760,9 +766,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example ```app/routes/form.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { willTransition(transition) { if (this.controller.get('userHasEnteredData') && @@ -1030,9 +1036,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/index.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { transitionToNewArticle() { this.transitionTo('articles.new'); @@ -1058,9 +1064,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/index.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { moveToChocolateCereal() { let cereal = { cerealId: 'ChocolateYumminess' }; @@ -1087,9 +1093,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/index.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { transitionToApples() { this.transitionTo('fruits.apples', { queryParams: { color: 'red' } }); @@ -1180,9 +1186,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/secret.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ afterModel() { if (!authorized()){ this.replaceWith('index'); @@ -1223,9 +1229,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/application.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { track(arg) { console.log(arg, 'was clicked'); @@ -1235,9 +1241,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/index.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ actions: { trackIfDebug(arg) { if (debug) { @@ -1389,9 +1395,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { resolved. ```app/routes/posts.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ afterModel(posts, transition) { if (posts.get('length') === 1) { this.transitionTo('post.show', posts.get('firstObject')); @@ -1515,9 +1521,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ model(params) { return this.store.findRecord('post', params.post_id); } @@ -1640,9 +1646,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ model(params) { // the server returns `{ id: 12 }` return Ember.$.getJSON('/posts/' + params.post_id); @@ -1688,9 +1694,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { `_super`: ```app/routes/photos.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ model() { return this.store.findAll('photo'); }, @@ -1728,9 +1734,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ setupController(controller, model) { controller.set('model', model); } @@ -1757,9 +1763,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { associated route or using `generateController`. ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ setupController(controller, post) { this._super(controller, post); this.controllerFor('posts').set('currentPost', post); @@ -1798,9 +1804,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ setupController(controller, post) { this._super(controller, post); this.generateController('posts'); @@ -1843,9 +1849,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/post/comments.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ model() { let post = this.modelFor('post'); return post.get('comments'); @@ -1896,9 +1902,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { alternative templates. ```app/routes/posts.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ renderTemplate(controller, model) { let favController = this.controllerFor('favoritePost'); @@ -1957,9 +1963,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { `application.hbs` by calling `render`: ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ renderTemplate() { this.render('photos', { into: 'application', @@ -1974,9 +1980,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ```app/routes/posts.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ renderTemplate(controller, model){ this.render('posts', { // the template to render, referenced by name into: 'application', // the template to render into, referenced by name @@ -2012,9 +2018,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { ``` ```app/routes/post.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default Ember.Route.extend({ + export default Route.extend({ renderTemplate() { this.render(); // all defaults apply } @@ -2082,9 +2088,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example: ```app/routes/application.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default App.Route.extend({ + export default Route.extend({ actions: { showModal(evt) { this.render(evt.modalName, { @@ -2092,6 +2098,7 @@ let Route = EmberObject.extend(ActionHandler, Evented, { into: 'application' }); }, + hideModal(evt) { this.disconnectOutlet({ outlet: 'modal', @@ -2107,9 +2114,9 @@ let Route = EmberObject.extend(ActionHandler, Evented, { Example: ```app/routes/application.js - import Ember from 'ember'; + import Route from '@ember/routing/route'; - export default App.Route.extend({ + export default Route.extend({ actions: { showModal(evt) { // ... diff --git a/packages/ember-runtime/lib/mixins/observable.js b/packages/ember-runtime/lib/mixins/observable.js index 93c5437febf..96b0f901a41 100644 --- a/packages/ember-runtime/lib/mixins/observable.js +++ b/packages/ember-runtime/lib/mixins/observable.js @@ -344,8 +344,10 @@ export default Mixin.create({ Observer methods have the following signature: - ```javascript - export default Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ init() { this._super(...arguments); this.addObserver('foo', this, 'fooDidChange'); diff --git a/packages/ember-runtime/lib/system/native_array.js b/packages/ember-runtime/lib/system/native_array.js index 606bbe2eeeb..48721f1681f 100644 --- a/packages/ember-runtime/lib/system/native_array.js +++ b/packages/ember-runtime/lib/system/native_array.js @@ -116,8 +116,10 @@ NativeArray = NativeArray.without(...ignore); Example - ```js - export default Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ tagName: 'ul', classNames: ['pagination'], diff --git a/packages/ember-utils/lib/owner.js b/packages/ember-utils/lib/owner.js index 6c3d171bc39..cbd25c74b66 100644 --- a/packages/ember-utils/lib/owner.js +++ b/packages/ember-utils/lib/owner.js @@ -21,17 +21,20 @@ export const OWNER = symbol('OWNER'); `audioType` passed as an attribute: ```app/components/play-audio.js - import Ember from 'ember'; - + import Component from '@ember/component'; + import { computed } from '@ember/object'; + import { getOwner } from '@ember/application'; + // Usage: // // {{play-audio audioType=model.audioType audioFile=model.file}} // - export default Ember.Component.extend({ - audioService: Ember.computed('audioType', function() { - let owner = Ember.getOwner(this); + export default Component.extend({ + audioService: computed('audioType', function() { + let owner = getOwner(this); return owner.lookup(`service:${this.get('audioType')}`); }), + click() { let player = this.get('audioService'); player.play(this.get('audioFile')); diff --git a/packages/ember-views/lib/mixins/action_support.js b/packages/ember-views/lib/mixins/action_support.js index e6b111fffc8..d8541827146 100644 --- a/packages/ember-views/lib/mixins/action_support.js +++ b/packages/ember-views/lib/mixins/action_support.js @@ -32,9 +32,10 @@ export default Mixin.create({ into action notifications of "play" or "stop" depending on some internal state of the component: - ```javascript - // app/components/play-button.js - export default Ember.Component.extend({ + ```app/components/play-button.js + import Component from '@ember/component'; + + export default Component.extend({ click() { if (this.get('isPlaying')) { this.sendAction('play'); @@ -56,9 +57,10 @@ export default Mixin.create({ interaction into application-specific semantics ("play" or "stop") and calls the specified action. - ```javascript - // app/controller/application.js - export default Ember.Controller.extend({ + ```app/controller/application.js + import Controller from '@ember/controller'; + + export default Controller.extend({ actions: { musicStarted() { // called when the play button is clicked @@ -75,9 +77,10 @@ export default Mixin.create({ If no action is passed to `sendAction` a default name of "action" is assumed. - ```javascript - // app/components/next-button.js - export default Ember.Component.extend({ + ```app/components/next-button.js + import Component from '@ember/component'; + + export default Component.extend({ click() { this.sendAction(); } @@ -89,9 +92,10 @@ export default Mixin.create({ {{next-button action=(action "playNextSongInAlbum")}} ``` - ```javascript - // app/controllers/application.js - App.ApplicationController = Ember.Controller.extend({ + ```app/controllers/application.js + import Controller from '@ember/controller'; + + export default Controller.extend({ actions: { playNextSongInAlbum() { ... diff --git a/packages/ember-views/lib/mixins/view_support.js b/packages/ember-views/lib/mixins/view_support.js index 385b6e882c6..8db26e7039f 100644 --- a/packages/ember-views/lib/mixins/view_support.js +++ b/packages/ember-views/lib/mixins/view_support.js @@ -22,8 +22,10 @@ export default Mixin.create({ The following example creates a tag like `
`. - ```javascript - Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ attributeBindings: ['priority'], priority: 'high' }); @@ -35,8 +37,10 @@ export default Mixin.create({ The following example creates markup like `
`. - ```javascript - Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ attributeBindings: ['visible'], visible: true }); @@ -46,8 +50,10 @@ export default Mixin.create({ you can create the same markup as the last example with a binding like this: - ```javascript - Ember.Component.extend({ + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ attributeBindings: ['isVisible:visible'], isVisible: true }); @@ -259,14 +265,16 @@ export default Mixin.create({ `elementId`, you should do this when the component or element is being instantiated: - ```javascript - export default Ember.Component.extend({ - init() { - this._super(...arguments); - let index = this.get('index'); - this.set('elementId', 'component-id' + index); - } - }); + ```app/components/my-component.js + import Component from '@ember/component'; + + export default Component.extend({ + init() { + this._super(...arguments); + let index = this.get('index'); + this.set('elementId', 'component-id' + index); + } + }); ``` @property elementId @@ -446,7 +454,7 @@ export default Mixin.create({ // /** - Handle events from `Ember.EventDispatcher` + Handle events from `EventDispatcher` @method handleEvent @param eventName {String}