Skip to content

Commit

Permalink
use file path and add imports
Browse files Browse the repository at this point in the history 
Used RFC #176 modules API for imports.
  • Loading branch information
@locks
locks committed Jul 27, 2017
1 parent c8e96a4 commit db7e657
Show file tree
Hide file tree
Showing 16 changed files with 229 additions and 179 deletions.
4 changes: 2 additions & 2 deletions packages/ember-application/lib/system/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
},
Expand Down
2 changes: 1 addition & 1 deletion packages/ember-application/lib/system/engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
74 changes: 37 additions & 37 deletions packages/ember-glimmer/lib/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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'
});
```
Expand All @@ -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']
});
```
Expand All @@ -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() {
Expand All @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
});
Expand All @@ -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
Expand All @@ -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
});
Expand All @@ -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
});
Expand Down Expand Up @@ -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'
Expand All @@ -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'
Expand All @@ -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'
Expand All @@ -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
Expand All @@ -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() {
Expand All @@ -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
Expand Down Expand Up @@ -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
});
```
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -879,7 +879,7 @@ const Component = CoreView.extend(
instantiated:
```javascript
export default Ember.Component.extend({
export default Component.extend({
init() {
this._super(...arguments);
Expand Down
26 changes: 16 additions & 10 deletions packages/ember-glimmer/lib/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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}`;
Expand Down
31 changes: 17 additions & 14 deletions packages/ember-glimmer/lib/helpers/action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -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');
Expand Down Expand Up @@ -192,15 +194,15 @@ 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) {
event.stopPropagation();
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
Expand Down Expand Up @@ -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()
});
```
Expand Down
Loading

0 comments on commit db7e657

Please sign in to comment.