diff --git a/source/cookbook/contributing/participating_if_you_dont_know_ember.md b/source/cookbook/contributing/participating_if_you_dont_know_ember.md
index 8236b4744..f3c52afb3 100644
--- a/source/cookbook/contributing/participating_if_you_dont_know_ember.md
+++ b/source/cookbook/contributing/participating_if_you_dont_know_ember.md
@@ -2,7 +2,7 @@
You are new to Ember, but want to help write the Cookbook.
### Solution
-Suggest and/or submit pull requests with a _problem_ statement (see [Suggesting A Recipe](./suggesting_a_recipe)). You do not need to worry about providing a solution or discussion. Someone more experienced with Ember will be able to take your _problem_ and provide a _solution_ and _discussion_.
+Suggest and/or submit pull requests with a _problem_ statement (see [Suggesting A Recipe](../suggesting_a_recipe)). You do not need to worry about providing a solution or discussion. Someone more experienced with Ember will be able to take your _problem_ and provide a _solution_ and _discussion_.
### Discussion
The first version of the Ember Cookbook will be completed in a few phases. First, we will be accepting
diff --git a/source/cookbook/contributing/participating_if_you_know_ember.md b/source/cookbook/contributing/participating_if_you_know_ember.md
index ecc475478..8683b32cc 100644
--- a/source/cookbook/contributing/participating_if_you_know_ember.md
+++ b/source/cookbook/contributing/participating_if_you_know_ember.md
@@ -17,7 +17,7 @@ Based on your experience and knowledge of Ember, we recommend submitting pull re
Problem, Solution & Discussion is the right way to help if you have a deeper understanding of the topic and can write cogently about why the solution is a good idea, explain pitfalls of other solutions, etc.
-You will be able to suggest possible recipes by forking this project and submitting a pull request with a new recipe (see [Suggesting a Recipe][suggesting_a_recipe]).
+You will be able to suggest possible recipes by forking this project and submitting a pull request with a new recipe (see [Suggesting a Recipe](../suggesting_a_recipe)).
[fork_repo]: https://github.com/emberjs/website
[suggesting_a_recipe]: ./suggesting_a_recipe
diff --git a/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md b/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
index 4ed9c2c01..b40c8f8cc 100644
--- a/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
+++ b/source/cookbook/event_handling_and_data_binding/binding_properties_of_an_object_to_its_own_properties.md
@@ -4,8 +4,8 @@ You want to base the value of one property on the value of another property.
### Solution
Use one of the computed property macros like `Ember.computed.alias` or `Ember.computed.gte`
-```js
-App.Person = Ember.Object.extend({
+```app/models/person.js
+export default Ember.Object.extend({
firstName : null,
lastName : null,
surname : Ember.computed.alias("lastName"),
@@ -19,5 +19,5 @@ on the values of other properties, correctly connecting them with bindings so th
updated when values change. These all are stored on the `Ember.computed` object
and [documented in the API documentation](http://emberjs.com/api/#method_computed)
-#### Example
-JS Bin
+
diff --git a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
index b85f44201..5e489a6b4 100644
--- a/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
+++ b/source/cookbook/helpers_and_components/adding_google_analytics_tracking.md
@@ -34,8 +34,12 @@ Add google analytic's base code to the html file that renders your ember app.
Then reopen the application router and add this function. It will be called when
`didTransition` is fired by the router.
-```js
-App.Router.reopen({
+```app/router.js
+var Router = Ember.Router.extend({
+ // customization goes here
+});
+
+Router.reopen({
notifyGoogleAnalytics: function() {
return ga('send', 'pageview', {
'page': this.get('url'),
@@ -43,6 +47,8 @@ App.Router.reopen({
});
}.on('didTransition')
});
+
+export default Router;
```
### Discussion
@@ -52,4 +58,4 @@ changes, in this example we are getting the path after the hash in the url so we
can notify Google Analytics about moving between areas of the site.
-[JSBin Example](http://jsbin.com/xebevu)
+
diff --git a/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md b/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
index 563251764..792ee1be1 100644
--- a/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
+++ b/source/cookbook/helpers_and_components/creating_a_handlebars_helper_to_truncate_text.md
@@ -20,6 +20,6 @@ Ember.Handlebars.helper('truncate', function(str, len) {
});
```
-#### Example
+
\ No newline at end of file
diff --git a/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md b/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
index 2e5809c17..93e8d8599 100644
--- a/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
+++ b/source/cookbook/helpers_and_components/creating_reusable_social_share_buttons.md
@@ -7,15 +7,14 @@ Write a custom component that renders the Tweet button with specific attributes
passed in.
```handlebars
-{{share-twitter data-url="http://emberjs.com"
- data-text="EmberJS Components are Amazing!"
- data-size="large"
- data-hashtags="emberjs"}}
-
+{{share-twitter class='twitter-share-button' href=url
+ data-text=text
+ data-size="large"
+ data-hashtags="emberjs"}}
```
-```javascript
-App.ShareTwitterComponent = Ember.Component.extend({
+```app/components/share-twitter.js
+export default Ember.Component.extend({
tagName: 'a',
classNames: 'twitter-share-button',
attributeBindings: ['data-size', 'data-url', 'data-text', 'data-hashtags']
@@ -25,9 +24,13 @@ App.ShareTwitterComponent = Ember.Component.extend({
Include Twitter's widget code in your HTML:
```javascript
-
+
```
+Note: the Twitter api does change from time to time. Refer to the [documents](https://dev.twitter.com/web/tweet-button) if necessary.
+
### Discussion
Twitter's widget library expects to find an `` tag on the page with specific `data-` attributes applied.
It takes the values of these attributes and, when the `` tag is clicked, opens an iFrame for twitter sharing.
@@ -42,6 +45,6 @@ attributes will be updated to match the new values.
An appropriate tag and css class are applied through the `tagName` and `classNames` properties.
-#### Example
+
diff --git a/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md b/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
index bdd998035..da59cf3ff 100644
--- a/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
+++ b/source/cookbook/helpers_and_components/spin_button_for_asynchronous_actions.md
@@ -6,26 +6,23 @@ Write an Ember Component to change to loading state when action is taking place.
For example a button to save data could be as
-```handlebars
-
-
-
+```app/templates/application.hbs
+{{spin-button id="forapplication" isLoading = isLoading buttonText=buttonText action='saveData'}}
```
-```javascript
-var App = Ember.Application.create({});
+```app/templates/components/spin-button.hbs
+
+
+```
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
isLoading:false,
buttonText:"Submit",
actions:{
@@ -39,8 +36,10 @@ App.ApplicationController = Ember.Controller.extend({
}
}
});
+```
-App.SpinButtonComponent = Ember.Component.extend({
+```app/components/spin-button.js
+export default Ember.Component.extend({
classNames: ['button'],
buttonText:"Save",
isLoading:false,
@@ -53,10 +52,8 @@ App.SpinButtonComponent = Ember.Component.extend({
}
}
});
-
```
-
### Discussion
I have dumbed down the sample code to only change text within the button. One may add a loading image inside the button or change the button to a div styled like a button.
@@ -64,5 +61,5 @@ The component is in charge of setting isLoading = true and the base controller p
For safety and sanity of the component, one can add a settimeout of however much time and then set 'isLoading' back to false so that the components comes to initial state no matter the result of the asynchronous call. But I would prefer it was properly handled in the parent controller.
Also note that the component does not let multiple clicks get in the way of loading status.
-#### Example
-JS Bin
+
diff --git a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
index fd7d006bc..af4a12336 100644
--- a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
+++ b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components.md
@@ -6,10 +6,10 @@ You want to add CSS class names to your Ember Components.
Set additional class names with the `classNames` property of subclassed components:
-```js
-App.AwesomeInputComponent = Ember.Component.extend({
+```app/component/awesome-input.js
+export default Ember.Component.extend({
classNames: ['css-framework-fancy-class']
-})
+});
```
```handlebars
@@ -28,8 +28,8 @@ If desired, you can apply multiple class names.
classNames: ['bold', 'italic', 'blue']
```
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
index 7070034ac..5b0473d68 100644
--- a/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
+++ b/source/cookbook/user_interface_and_interaction/adding_css_classes_to_your_components_based_on_properties.md
@@ -29,8 +29,8 @@ classNameBindings: ['isRelated:relative'],
isRelatedBinding: "content.isRelated" // value resolves to boolean
```
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/basic_form_validations.md b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
index a9869c033..fb691b7fd 100644
--- a/source/cookbook/user_interface_and_interaction/basic_form_validations.md
+++ b/source/cookbook/user_interface_and_interaction/basic_form_validations.md
@@ -12,8 +12,8 @@ that the field has been focused, and add a computed property named
been focused. The component expects to get the validation result as the
`valid` property.
-```javascript
-App.ValidatedInputComponent = Ember.Component.extend({
+```app/components/validated-input.js
+export default Ember.Component.extend({
beenFocused: false,
valid: null,
hasError: function() {
@@ -31,12 +31,10 @@ And in the template of the component, put an `{{input}}` and wrap it
into a div, which would have the class of `has-error` bound to
`hasError`.
-```html
-
```
The use like this:
@@ -62,6 +60,6 @@ It renders a wrapped input field. The wrapper has the `has-error` class
if `hasError` property of the component is true. It's true only when
the validation fails and the field has been focused at.
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
index 39ea2fbf7..81bbd3a03 100644
--- a/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
+++ b/source/cookbook/user_interface_and_interaction/converting_strings_to_currency_with_accounting_js.md
@@ -21,10 +21,9 @@ formattedAmount: function(key, value) {
}.property('amount')
```
-#### Example
-
-JS Bin
+
[setters]: /guides/object-model/computed-properties/
[accounting]: http://josscrowcroft.github.io/accounting.js/
diff --git a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
index 6f070b4e4..982ac2048 100644
--- a/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
+++ b/source/cookbook/user_interface_and_interaction/displaying_formatted_dates_with_moment_js.md
@@ -15,8 +15,8 @@ Let's look at a simple example. You're working on a website for your
client, and one of the requirements is to have the current date on the index page in human readable format. This is a perfect place to use a
Handlebars helper that "pretty prints" the current date:
-```javascript
-Ember.Handlebars.registerBoundHelper('currentDate', function() {
+```app/helpers/current-date.js
+export default Ember.Handlebars.makeBoundHelper(function() {
return moment().format('LL');
});
```
@@ -29,10 +29,13 @@ Today's date: {{currentDate}} // Today's date: August 30 2013
You can even enhance your code and pass in the date format to the helper:
-```javascript
+```app/route/application.js
Ember.Handlebars.registerBoundHelper('currentDate', function(format) {
return moment().format(format);
});
+
+export default Ember.Route.extend({
+});
```
Now you would need to pass an additional parameter to the helper:
@@ -49,8 +52,8 @@ Define `formattedDate` computed property that depends on
`date` and `format`. Computed property in this example does
the same thing as Handlebars helpers defined above.
-```javascript
-App.ApplicationController = Ember.Controller.extend({
+```app/controllers/application.js
+export default Ember.Controller.extend({
format: "YYYYMMDD",
date: null,
formattedDate: function() {
@@ -61,7 +64,7 @@ App.ApplicationController = Ember.Controller.extend({
});
```
-```html
+```/app/templates/application.hbs
{{input value=date}}
{{input value=format}}
{{formattedDate}}
@@ -84,6 +87,6 @@ Handlebars helper with one big difference:
`formattedDate` can be consumed later without applying
date format on the date property again.
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
index e246655b3..ba8ec18c6 100644
--- a/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
+++ b/source/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted.md
@@ -6,8 +6,8 @@ Subclass `Ember.TextField` and define a method marked with
`.on('didInsertElement')`. Inside this method apply `focus`
to the text field by accessing the components's jQuery `$` property:
-```javascript
-App.FocusInputComponent = Ember.TextField.extend({
+```app/components/focus-input.js
+export default Ember.TextField.extend({
becomeFocused: function() {
this.$().focus();
}.on('didInsertElement')
@@ -47,6 +47,6 @@ of our component.
Prototype extension can be disabled by setting the `Ember.EXTEND_PROTOTYPES` property to false.
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md b/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
index 1c7839bb0..939ae2518 100644
--- a/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
+++ b/source/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes.md
@@ -6,8 +6,8 @@ The page scroller keeps in the same position when you go from one page to anothe
Add the following mixin to the affected Routes:
-```js
-App.ResetScroll = Ember.Mixin.create({
+```app/mixins/reset-scroll.js
+export default Ember.Mixin.create({
activate: function() {
this._super();
window.scrollTo(0,0);
@@ -17,8 +17,10 @@ App.ResetScroll = Ember.Mixin.create({
Only if you need do something on the `activate` method you must call `this._super()` at the beginning:
-```js
-App.IndexRoute = Ember.Route.extend(App.ResetScroll, {
+```app/routes/index.js
+import ResetScroll from '../mixins/reset-scroll/';
+
+export default Ember.Route.extend(ResetScroll, {
//I need to do other things with activate
activate: function() {
this._super.apply(this, arguments); // Call super at the beginning
@@ -27,6 +29,6 @@ App.IndexRoute = Ember.Route.extend(App.ResetScroll, {
});
```
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md b/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
index f2d086332..bad902462 100644
--- a/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
+++ b/source/cookbook/user_interface_and_interaction/specifying_data_driven_areas_of_templates_that_do_not_need_to_update.md
@@ -26,6 +26,6 @@ life, you can specifiy that the property is not bound by applying the `{{unbound
that is not bound will avoid adding unnecessary observers on a property.
-#### Example
+
diff --git a/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md b/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
index 68114bab0..6d85bfb52 100644
--- a/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
+++ b/source/cookbook/user_interface_and_interaction/using_modal_dialogs.md
@@ -26,8 +26,8 @@ In a template:
In your application route:
-```javascript
-App.ApplicationRoute = Ember.Route.extend({
+```app/routes/application.js
+export default Ember.Route.extend({
actions: {
openModal: function(modalName) {
return this.render(modalName, {
@@ -43,19 +43,19 @@ When closing a modal, you can use the route's `disconnectOutlet` method to remov
the modal from the DOM.
```javascript
- closeModal: function() {
- return this.disconnectOutlet({
- outlet: 'modal',
- parentView: 'application'
- });
- }
+closeModal: function() {
+ return this.disconnectOutlet({
+ outlet: 'modal',
+ parentView: 'application'
+ });
+}
```
It may also be helpful to use a `modal-dialog` component to handle common markup
and interactions such as rendering an overlay and handling clicks outside of the
modal.
-#### Example
+
diff --git a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
index e04fae1b1..ee2d7dd90 100644
--- a/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
+++ b/source/cookbook/working_with_objects/continuous_redrawing_of_views.md
@@ -10,11 +10,11 @@ refreshed when the `pulse` attribute increments.
The clock object can be used to create new instances for binding to new views
generated within the application, like a list of comments.
-## Discussion
+
### ClockService object
@@ -26,20 +26,20 @@ with a time of 250 milliseconds as the interval. A property is set at the end
of the interval. Since the `tick` method observes the incremented property
another interval is triggered each time the property increases.
-```javascript
-var ClockService = Ember.Object.extend({
- pulse: Ember.computed.oneWay('_seconds').readOnly(),
- tick: function () {
- var clock = this;
- Ember.run.later(function () {
- var seconds = clock.get('_seconds');
- if (typeof seconds === 'number') {
- clock.set('_seconds', seconds + (1/4));
- }
- }, 250);
- }.observes('_seconds').on('init'),
- _seconds: 0,
-});
+```app/services/clock.js
+export default Ember.Object.extend({
+ pulse: Ember.computed.oneWay('_seconds').readOnly(),
+ tick: function () {
+ var clock = this;
+ Ember.run.later(function () {
+ var seconds = clock.get('_seconds');
+ if (typeof seconds === 'number') {
+ clock.set('_seconds', seconds + (1/4));
+ }
+ }, 250);
+ }.observes('_seconds').on('init'),
+ _seconds: 0
+ });
```
### Binding to the `pulse` attribute
@@ -47,14 +47,14 @@ var ClockService = Ember.Object.extend({
In this recipe, an application initializer is used to inject an instance of the
`ClockService` object, setting a controller's `clock` property to this instance.
-```javascript
-Ember.Application.initializer({
- name: 'clockServiceInitializer',
- initialize: function(container, application) {
- container.register('clock:service', ClockService);
- application.inject('controller:interval', 'clock', 'clock:service');
+```app/initializers/services.js
+export default {
+ name: 'services',
+ initialize: function(container, app) {
+ // inject into a specific route
+ app.inject('controller:interval', 'clock', 'service:clock');
}
-});
+};
```
The controller can set any computed properties based on the `pulse` property of
@@ -67,22 +67,22 @@ initialization.
The controller has (session) data to display `seconds` to visitors, as well as
a handful of properties used as conditions in the Handlebars template.
-```javascript
-App.IntervalController = Ember.ObjectController.extend({
- secondsBinding: 'clock.pulse',
- fullSecond: function () {
- return (this.get('seconds') % 1 === 0);
- }.property('seconds'),
- quarterSecond: function () {
- return (this.get('seconds') % 1 === 1/4);
- }.property('seconds'),
- halfSecond: function () {
- return (this.get('seconds') % 1 === 1/2);
- }.property('seconds'),
- threeQuarterSecond: function () {
- return (this.get('seconds') % 1 === 3/4);
- }.property('seconds')
-});
+```app/controllers/interval.js
+export default Ember.ObjectController.extend({
+ secondsBinding: 'clock.pulse',
+ fullSecond: function () {
+ return (this.get('seconds') % 1 === 0);
+ }.property('seconds'),
+ quarterSecond: function () {
+ return (this.get('seconds') % 1 === 1/4);
+ }.property('seconds'),
+ halfSecond: function () {
+ return (this.get('seconds') % 1 === 1/2);
+ }.property('seconds'),
+ threeQuarterSecond: function () {
+ return (this.get('seconds') % 1 === 3/4);
+ }.property('seconds')
+ });
```
A controller for a list of comments, each comment will have a new clock
@@ -90,24 +90,28 @@ instance when added to the list. The comment item controller sets up
the `seconds` binding, used by the template to show the time since the
comment was created.
-```javascript
-App.CommentItemController = Ember.ObjectController.extend({
- seconds: Ember.computed.oneWay('clock.pulse').readOnly()
+```app/controllers/comment-item.js
+export default Ember.ObjectController.extend({
+ seconds: Ember.computed.oneWay('clock.pulse').readOnly()
});
+```
-App.CommentsController = Ember.ArrayController.extend({
- itemController: 'commentItem',
- comment: null,
- actions: {
- add: function () {
- this.addObject(Em.Object.create({
- comment: this.get('comment'),
- clock: ClockService.create()
- }));
- this.set('comment', null);
+```app/controllers/comments.js
+import ClockService from '../services/clock';
+
+export default Ember.ArrayController.extend({
+ itemController: 'commentItem',
+ comment: null,
+ actions: {
+ add: function () {
+ this.addObject(Em.Object.create({
+ comment: this.get('comment'),
+ clock: ClockService.create()
+ }));
+ this.set('comment', null);
+ }
}
- }
-});
+ });
```
### Handlebars template which displays the `pulse`
@@ -116,7 +120,7 @@ The `seconds` value is computed from the `pulse` attribute. And the controller
has a few properties to select a component to render, `fullSecond`,
`quarterSecond`, `halfSecond`, `threeQuarterSecond`.
-```handlebars
+```app/templates/interval.hbs
{{#if fullSecond}}
{{nyan-start}}
{{/if}}
@@ -134,8 +138,7 @@ has a few properties to select a component to render, `fullSecond`,
```
A template for a list of comments
-
-```handlebars
+```app/templates/comments.hbs