diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 353db560c..eec906646 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -796,6 +796,12 @@ a.toc-anchor { th, td { padding: 5px 10px; } + + &.specific { + th, td { + padding: 5px 6px; + } + } } .note { diff --git a/source/templates/actions.md b/source/templates/actions.md index 2ed5cfad1..a92fa6ac8 100644 --- a/source/templates/actions.md +++ b/source/templates/actions.md @@ -9,9 +9,7 @@ You can use the `{{action}}` helper to make an HTML element clickable. When a user clicks the element, the named event will be sent to your application. -```handlebars - - +```app/templates/post.hbs
{{intro}}
@@ -24,8 +22,8 @@ application. {{/if}} ``` -```js -App.PostController = Ember.ObjectController.extend({ +```app/controllers/post.js +export default Ember.ObjectController.extend({ // initial value isExpanded: false, @@ -72,8 +70,8 @@ a method directly on the controller, it is strongly recommended that you put your action handling methods inside an `actions` hash for forward compatibility. -```js -App.PostRoute = Ember.Route.extend({ +```app/routes/post.js +export default Ember.Route.extend({ actions: { expand: function() { this.controller.set('isExpanded', true); @@ -91,8 +89,8 @@ that when executed, `this` is the route, not the `actions` hash. To continue bubbling the action, you must return true from the handler: -```js -App.PostRoute = Ember.Route.extend({ +```app/routes/post.js +export default Ember.Route.extend({ actions: { expand: function() { this.controller.set('isExpanded', true); @@ -117,7 +115,7 @@ When an action is triggered, but no matching action handler is implemented on the controller, the current route, or any of the current route's ancestors, an error will be thrown. -![Action Bubbling](../images/template-guide/action-bubbling.png) +![Action Bubbling](/images/template-guide/action-bubbling.png) This allows you to create a button that has different behavior based on where you are in the application. For example, you might want to have a @@ -140,8 +138,8 @@ For example, if the `post` argument was passed: The controller's `select` action handler would be called with a single argument containing the post model: -```js -App.PostController = Ember.ObjectController.extend({ +```app/controllers/post.js +export default Ember.ObjectController.extend({ actions: { select: function(post) { console.log(post.get('title')); @@ -176,11 +174,9 @@ pressed modifier keys. You can supply an `allowedKeys` option to specify which keys should not be ignored. ```handlebars - +
+ click me +
``` This way the `{{action}}` will fire when clicking with the alt key @@ -228,8 +224,8 @@ is most commonly used to send actions to a view instead of a controller. You would handle this in an `actions` hash on your view. -```javascript -App.PostsIndexView = Ember.View.extend({ +```app/views/posts.js +export default Ember.View.extend({ actions: { select: function(post) { // do your business. diff --git a/source/templates/binding-element-attributes.md b/source/templates/binding-element-attributes.md index 21121ba10..7f9de330c 100644 --- a/source/templates/binding-element-attributes.md +++ b/source/templates/binding-element-attributes.md @@ -56,15 +56,15 @@ renders the following HTML: ``` -There are two ways to enable support for data attributes. One way would be to add an +There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. `Ember.LinkView` or `Ember.TextField` for the specific attribute: ```javascript -Ember.LinkView.reopen({ +export default Ember.LinkView.reopen({ attributeBindings: ['data-toggle'] }); -Ember.TextField.reopen({ +export default Ember.TextField.reopen({ attributeBindings: ['data-toggle', 'data-placement'] }); ``` @@ -74,7 +74,7 @@ Now the same handlebars code above renders the following HTML: ```html Photos - ``` @@ -82,7 +82,7 @@ You can also automatically bind data attributes on the base view with the following: ```javascript -Ember.View.reopen({ +export default Ember.View.reopen({ init: function() { this._super(); var self = this; diff --git a/source/templates/binding-element-class-names.md b/source/templates/binding-element-class-names.md index dca96c807..8bc1f6902 100644 --- a/source/templates/binding-element-class-names.md +++ b/source/templates/binding-element-class-names.md @@ -130,4 +130,3 @@ order: Warning! ``` - diff --git a/source/templates/development-helpers.md b/source/templates/development-helpers.md index 5a2ee473f..f8249ada8 100644 --- a/source/templates/development-helpers.md +++ b/source/templates/development-helpers.md @@ -24,7 +24,6 @@ you the ability to inspect the current rendering context: ```handlebars {{debugger}} ``` - Just before the helper is invoked two useful variables are defined: * `templateContext` The current context that variables are fetched from. This diff --git a/source/templates/handlebars-basics.md b/source/templates/handlebars-basics.md index 1c00f2e43..c41816f7d 100644 --- a/source/templates/handlebars-basics.md +++ b/source/templates/handlebars-basics.md @@ -9,48 +9,11 @@ describing the user interface of your app. And, once you've told Ember.js to render a given template on the screen, you don't need to write any additional code to make sure it keeps up-to-date. -If you'd prefer an indentation-based alternative to Handlebars syntax, -try [Emblem.js](http://www.emblemjs.com), but make sure you're comfortable -with Handlebars first! - ### Defining Templates -If you're not using build tools, you can define your application's main -template inside your HTML by putting it inside a ` - - -``` - -This template will be compiled automatically and become your -[application template](../../templates/the-application-template), -which will be displayed on the page when your app loads. +By default, adjust your [application template](../the-application-template), that is created automatically for you and will be displayed on the page when your app loads. -You can also define templates by name that can be used later. For -example, you may want to define a reusable control that is used in many -different places in your user interface. To tell Ember.js to save the -template for later, instead of displaying it immediately, you can add -the `data-template-name` attribute: - -```html - - - - - -``` - -If you are using build tools to manage your application's assets, most -will know how to precompile Handlebars templates and make them available -to Ember.js. +You can also define templates by name that can be used later. If you would like to create a template that is shared across many areas of your site, you should investigate [components](../../components/defining-a-component/). The components section information on creating a re-usable template. ### Handlebars Expressions @@ -68,13 +31,14 @@ This would look up the `firstName` and `lastName` properties from the controller, insert them into the HTML described in the template, then put them into the DOM. -By default, your top-most application template is bound to your `ApplicationController`: +By default, your top-most application template is bound to your application controller. Note that this file is not shown by default because it is created behind the scenes by Ember CLI. To customize the controller, create the following file: -```javascript -App.ApplicationController = Ember.Controller.extend({ +```app/controllers/application.js +export default Ember.Controller.extend({ firstName: "Trek", lastName: "Glowacki" }); + ``` The above template and controller would combine to display the following diff --git a/source/templates/links.md b/source/templates/links.md index d4e55d187..02108b5c9 100644 --- a/source/templates/links.md +++ b/source/templates/links.md @@ -2,8 +2,8 @@ You create a link to a route using the `{{link-to}}` helper. -```js -App.Router.map(function() { +```app/router.js +Router.map(function() { this.resource("photos", function(){ this.route("edit", { path: "/:photo_id" }); }); @@ -59,8 +59,8 @@ The `{{link-to}}` helper takes: If the route is nested, you can supply a model or an identifier for each dynamic segment. -```js -App.Router.map(function() { +```app/router.js +Router.map(function() { this.resource("photos", function(){ this.resource("photo", { path: "/:photo_id" }, function(){ this.route("comments"); diff --git a/source/templates/rendering-with-helpers.md b/source/templates/rendering-with-helpers.md index c06d142b8..154b519cc 100644 --- a/source/templates/rendering-with-helpers.md +++ b/source/templates/rendering-with-helpers.md @@ -6,18 +6,17 @@ Ember.js provides several helpers that allow you to render other views and templ `{{partial}}` does not change context or scope. It simply drops the given template into place with the current scope. -```handlebars - - - +```app/templates/author.hbs +Written by {{author.firstName}} {{author.lastName}} ``` +```app/templates/post.hbs +

{{title}}

+
{{body}}
+{{partial "author"}} +``` + + ```html

Why You Should Use Ember.JS

@@ -29,8 +28,8 @@ Ember.js provides several helpers that allow you to render other views and templ This helper works like the partial helper, except instead of providing a template to be rendered within the current template, you provide a view class. The view controls what template is rendered. -```javascript -App.AuthorView = Ember.View.extend({ +```app/views/author.js +export default Ember.View.extend({ // We are setting templateName manually here to the default value templateName: "author", @@ -42,16 +41,14 @@ App.AuthorView = Ember.View.extend({ }) ``` -```handlebars - +```app/views/author.hbs +Written by {{view.fullName}} +``` - +```app/templates/author.hbs +

{{title}}

+
{{body}}
+{{view "author"}} ``` ```html @@ -64,12 +61,12 @@ App.AuthorView = Ember.View.extend({ When using `{{partial "author"}}`: -* No instance of App.AuthorView will be created +* No instance of author view will be created * The given template will be rendered When using `{{view "author"}}`: -* An instance of App.AuthorView will be created +* An instance of author view will be created * It will be rendered here, using the template associated with that view (the default template being "author") For more information, see [Inserting Views in Templates](../../views/inserting-views-in-templates) @@ -90,21 +87,19 @@ For more information, see [Inserting Views in Templates](../../views/inserting-v Modifying the post / author example slightly: -```handlebars - - - +```app/templates/author.hbs +Written by {{firstName}} {{lastName}}. +Total Posts: {{postCount}} ``` -```javascript -App.AuthorController = Ember.ObjectController.extend({ +```app/templates/post.hbs +

{{title}}

+
{{body}}
+{{render "author" author}} +``` + +```app/controllers/author.js +export default Ember.ObjectController.extend({ postCount: function() { return this.get("model.posts.length"); }.property("model.posts.[]") @@ -113,7 +108,7 @@ App.AuthorController = Ember.ObjectController.extend({ In this example, render will: -* Get an instance of App.AuthorView if that class exists, otherwise uses a default generated view +* Get an instance of author view if that class exists, otherwise uses a default generated view * Use the corresponding template (in this case the default of "author") * Get (or generate) the singleton instance of AuthorController * Set the AuthorController's model to the 2nd argument passed to render, here the author field on the post @@ -171,7 +166,7 @@ Note: `{{render}}` cannot be called multiple times for the same route when not s #### Specific - +
@@ -184,24 +179,24 @@ Note: `{{render}}` cannot be called multiple times for the same route when not s - - - - + + + + - - - - + + + + - - - - + + + +
Helper
{{partial "author"}}author.hbsPostApp.PostViewApp.PostControllertemplates/author.hbsmodels/post.jsviews/post.jscontrollers/post.js
{{view "author"}}author.hbsPostApp.AuthorViewApp.PostControllertemplates/author.hbsmodels/post.jsviews/author.jscontrollers/post.js
{{render "author" author}}author.hbsAuthorApp.AuthorViewApp.AuthorControllertemplates/author.hbsmodels/author.jsviews/author.jscontrollers/author.js
diff --git a/source/templates/the-application-template.md b/source/templates/the-application-template.md index 3a31d53b0..f7dd17ca8 100644 --- a/source/templates/the-application-template.md +++ b/source/templates/the-application-template.md @@ -29,17 +29,4 @@ currently at `/posts` or `/posts/15`, for example. For more information about how outlets are filled in by the router, see [Routing](../../routing). -If you are keeping your templates in HTML, create a ` -``` - -If you're using build tools to load your templates, make sure you name -the template `application`. +Ember CLI will create `application.hbs` for you by default in `app/templates/application.hbs`. diff --git a/source/templates/writing-helpers.md b/source/templates/writing-helpers.md index a00d8a59e..686d0ed1a 100644 --- a/source/templates/writing-helpers.md +++ b/source/templates/writing-helpers.md @@ -2,9 +2,9 @@ Sometimes, you may use the same HTML in your application multiple times. In thos For example, imagine you are frequently wrapping certain values in a `` tag with a custom class. You can register a helper from your JavaScript like this: -```javascript -Ember.Handlebars.helper('highlight', function(value, options) { - var escaped = Ember.Handlebars.Utils.escapeExpression(value); +```app/helpers/highlight.js +export default Ember.Handlebars.makeBoundHelper( function(value, options) { + var escaped = Handlebars.Utils.escapeExpression(value); return new Ember.Handlebars.SafeString('' + escaped + ''); }); ``` @@ -31,12 +31,12 @@ value. ### Dependencies -Imagine you want to render the full name of an `App.Person`. In this +Imagine you want to render the full name of a `Person`. In this case, you will want to update the output if the person itself changes, or if the `firstName` or `lastName` properties change. -```js -Ember.Handlebars.helper('fullName', function(person) { +```app/helpers/full-name.js +export default Ember.Handlebars.makeBoundHelper( function(person) { return person.get('firstName') + ' ' + person.get('lastName'); }, 'firstName', 'lastName'); ``` @@ -59,14 +59,16 @@ You may also find yourself rendering your view classes in multiple places using the `{{view}}` helper. In this case, you can save yourself some typing by registering a custom view helper. -For example, let’s say you have a view called `App.CalendarView`. +For example, let’s say you have a view called `Calendar`. You can register a helper like this: ```javascript -Ember.Handlebars.helper('calendar', App.CalendarView); +import Calendar from 'my-app/views/calendar'; + +Ember.Handlebars.makeBoundHelper('calendar', Calendar); ``` -Using `App.CalendarView` in a template then becomes as simple as: +Using `Calendar` in a template then becomes as simple as: ```handlebars {{calendar}}