Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Commit

Permalink
Merge pull request #2075 from trek/redirects
Browse files Browse the repository at this point in the history 
Redirects guides to versioned guides
  • Loading branch information
@rwjblue
rwjblue committed Mar 25, 2015
2 parents c470027 + 3fcadcb commit 313d064
Show file tree
Hide file tree
Showing 192 changed files with 908 additions and 17,315 deletions.
4 changes: 1 addition & 3 deletions config.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,7 @@
# Pages
###

page 'guides*', layout: :guide do
@guides = data.guides
end
page 'guides*', layout: :guide

page 'community.html'

Expand Down
418 changes: 0 additions & 418 deletions data/guides.yml
View file

This file was deleted.

4 changes: 2 additions & 2 deletions source/documentation.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<meta http-equiv="refresh" content="0;URL='/guides'">
<meta http-equiv="refresh" content="0;URL='http://guides.emberjs.com/v1.10.0/'">

Redirecting to [/guides](/guides)
Redirecting to [http://guides.emberjs.com/v1.10.0/](http://guides.emberjs.com/v1.10.0/)
32 changes: 5 additions & 27 deletions source/guides/application/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,5 @@
## Creating an Application

The first step to creating an Ember.js application is to make an
instance of `Ember.Application` and assign it to a global variable.

```javascript
window.App = Ember.Application.create();
```

Most people call their application `App`, but you can call it whatever
makes the most sense to you. Just make sure it starts with a capital
letter.

What does creating an `Ember.Application` instance get you?

1. It is your application's namespace. All of the classes in your
application will be defined as properties on this object (e.g.,
`App.PostsView` and `App.PostsController`). This helps to prevent
polluting the global scope.
2. It adds event listeners to the document and is responsible for
delegating events to your views. (See [The View
Layer](/guides/understanding-ember/the-view-layer)
for a detailed description.)
3. It automatically renders the [application
template](/guides/templates/the-application-template).
4. It automatically creates a router and begins routing, choosing which
template and model to display based on the current URL.
<!--
Guides have moved to http://guides.emberjs.com.
This file exists so a <meta> redirect is created
via layouts/guide.erb
-->
170 changes: 5 additions & 165 deletions source/guides/components/customizing-a-components-element.md
View file
Original file line number Diff line number Diff line change
@@ -1,165 +1,5 @@
By default, each component is backed by a `<div>` element. If you were
to look at a rendered component in your developer tools, you would see
a DOM representation that looked something like:

```html
<div id="ember180" class="ember-view">
<h1>My Component</h1>
</div>
```

You can customize what type of element Ember generates for your
component, including its attributes and class names, by creating a
subclass of `Ember.Component` in your JavaScript.

### Customizing the Element

To use a tag other than `div`, subclass `Ember.Component` and assign it
a `tagName` property. This property can be any valid HTML5 tag name as a
string.

```js
App.NavigationBarComponent = Ember.Component.extend({
tagName: 'nav'
});
```

```handlebars
{{! templates/components/navigation-bar }}
<ul>
<li>{{#link-to 'home'}}Home{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
```

### Customizing Class Names

You can also specify which class names are applied to the component's
element by setting its `classNames` property to an array of strings:

```javascript
App.NavigationBarComponent = Ember.Component.extend({
classNames: ['primary']
});
```

If you want class names to be determined by properties of the component,
you can use class name bindings. If you bind to a Boolean property, the
class name will be added or removed depending on the value:

```js
App.TodoItemComponent = Ember.Component.extend({
classNameBindings: ['isUrgent'],
isUrgent: true
});
```

This component would render the following:

```html
<div class="ember-view is-urgent"></div>
```

If `isUrgent` is changed to `false`, then the `is-urgent` class name will be removed.

By default, the name of the Boolean property is dasherized. You can customize the class name
applied by delimiting it with a colon:

```javascript
App.TodoItemComponent = Ember.Component.extend({
classNameBindings: ['isUrgent:urgent'],
isUrgent: true
});
```

This would render this HTML:

```html
<div class="ember-view urgent">
```

Besides the custom class name for the value being `true`, you can also specify a class name which is used when the value is `false`:

```javascript
App.TodoItemComponent = Ember.Component.extend({
classNameBindings: ['isEnabled:enabled:disabled'],
isEnabled: false
});
```

This would render this HTML:

```html
<div class="ember-view disabled">
```

You can also specify a class which should only be added when the property is
`false` by declaring `classNameBindings` like this:

```javascript
App.TodoItemComponent = Ember.Component.extend({
classNameBindings: ['isEnabled::disabled'],
isEnabled: false
});
```

This would render this HTML:

```html
<div class="ember-view disabled">
```

If the `isEnabled` property is set to `true`, no class name is added:

```html
<div class="ember-view">
```

If the bound property's value is a string, that value will be added as a class name without
modification:

```javascript
App.TodoItemComponent = Ember.Component.extend({
classNameBindings: ['priority'],
priority: 'highestPriority'
});
```

This would render this HTML:

```html
<div class="ember-view highestPriority">
```

### Customizing Attributes

You can bind attributes to the DOM element that represents a component
by using `attributeBindings`:

```javascript
App.LinkItemComponent = Ember.Component.extend({
tagName: 'a',
attributeBindings: ['href'],
href: "http://emberjs.com"
});
```

You can also bind these attributes to differently named properties:

```javascript
App.LinkItemComponent = Ember.Component.extend({
tagName: 'a',
attributeBindings: ['customHref:href'],
customHref: "http://emberjs.com"
});
```

### Example

Here is an example todo application that shows completed todos with a
red background:

<a class="jsbin-embed" href="http://jsbin.com/duzala/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

**Note:** The binding functionality in this very simple example could also be implemented without
the use of `Ember.Component` but by simply [binding element attributes](/guides/templates/binding-element-attributes) or [binding element class names](/guides/templates/binding-element-class-names).
<!--
Guides have moved to http://guides.emberjs.com.
This file exists so a <meta> redirect is created
via layouts/guide.erb
-->
85 changes: 5 additions & 80 deletions source/guides/components/defining-a-component.md
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,5 @@
To define a component, create a template whose name starts with
`components/`. To define a new component, `{{blog-post}}` for example,
create a `components/blog-post` template.

**Note:** Components must have a dash in their name. So `blog-post` is an acceptable name,
but `post` is not. This prevents clashes with current or future HTML element names, and
ensures Ember picks up the components automatically.

If you are including your Handlebars templates inside an HTML file via
`<script>` tags, it would look like this:

```handlebars
<script type="text/x-handlebars" id="components/blog-post">
<h1>Blog Post</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
```

If you're using build tools, create a Handlebars file at
`templates/components/blog-post.handlebars`.

Having a template whose name starts with `components/` creates a
component of the same name. Given the above template, you can now use the
`{{blog-post}}` custom element:

```handlebars
<h1>My Blog</h1>
{{#each post in model}}
{{blog-post}}
{{/each}}
```

<a class="jsbin-embed" href="http://jsbin.com/juvic/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

Each component, under the hood, is backed by an element. By default
Ember will use a `<div>` element to contain your component's template.
To learn how to change the element Ember uses for your component, see
[Customizing a Component's
Element](/guides/components/customizing-a-components-element).


### Defining a Component Subclass

Often times, your components will just encapsulate certain snippets of
Handlebars templates that you find yourself using over and over. In
those cases, you do not need to write any JavaScript at all. Just define
the Handlebars template as described above and use the component that is
created.

If you need to customize the behavior of the component you'll
need to define a subclass of `Ember.Component`. For example, you would
need a custom subclass if you wanted to change a component's element,
respond to actions from the component's template, or manually make
changes to the component's element using JavaScript.

Ember knows which subclass powers a component based on its name. For
example, if you have a component called `blog-post`, you would create a
subclass called `App.BlogPostComponent`. If your component was called
`audio-player-controls`, the class name would be
`App.AudioPlayerControlsComponent`.

In other words, Ember will look for a class with the camelized name of
the component, followed by `Component`.

<table>
<thead>
<tr>
<th>Component Name</th>
<th>Component Class</th>
</tr>
</thead>
<tr>
<td><code>blog-post</code></td>
<td><code>App.BlogPostComponent</code></td>
</tr>
<tr>
<td><code>audio-player-controls</code></td>
<td><code>App.AudioPlayerControlsComponent</code></td>
</tr>
</table>
<!--
Guides have moved to http://guides.emberjs.com.
This file exists so a <meta> redirect is created
via layouts/guide.erb
-->
50 changes: 5 additions & 45 deletions source/guides/components/handling-user-interaction-with-actions.md
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,5 @@
Components allow you to define controls that you can reuse throughout
your application. If they're generic enough, they can also be shared
with others and used in multiple applications.

To make a reusable control useful, however, you first need to allow
users of your application to interact with it.

You can make elements in your component interactive by using the
`{{action}}` helper. This is the [same `{{action}}` helper you use in
application templates](/guides/templates/actions), but it has an
important difference when used inside a component.

Instead of sending an action to the template's controller, then bubbling
up the route hierarchy, actions sent from inside a component are sent
directly to the component's `Ember.Component` instance, and do not
bubble.

For example, imagine the following component that shows a post's title.
When the title is clicked, the entire post body is shown:

```handlebars
<script type="text/x-handlebars" id="components/post-summary">
<h3 {{action "toggleBody"}}>{{title}}</h3>
{{#if isShowingBody}}
<p>{{{body}}}</p>
{{/if}}
</script>
```

```js
App.PostSummaryComponent = Ember.Component.extend({
actions: {
toggleBody: function() {
this.toggleProperty('isShowingBody');
}
}
});
```
<a class="jsbin-embed" href="http://jsbin.com/yuzena/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

The `{{action}}` helper can accept arguments, listen for different event
types, control how action bubbling occurs, and more.

For details about using the `{{action}}` helper, see the [Actions
section](/guides/templates/actions) of the Templates chapter.
<!--
Guides have moved to http://guides.emberjs.com.
This file exists so a <meta> redirect is created
via layouts/guide.erb
-->
Loading

0 comments on commit 313d064

Please sign in to comment.