-
-
Notifications
You must be signed in to change notification settings - Fork 874
Rewrote components to cli in the guide #18
Changes from 18 commits
c98fc56
c0ae949
9275e8f
8eaf6b1
04ea9b7
9c3a326
d8de0c8
fad684f
518d8bb
9a32496
94338c3
88f1164
2d47c01
1f66b5b
3bff790
a366765
9cc35c1
4a4bdfa
e839694
0067c10
1be7722
cbcc7e8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,31 +6,64 @@ create a `components/blog-post` template. | |
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> | ||
A sample component template would look like this: | ||
|
||
```app/components/blog-post.hbs | ||
|
||
<h1>Blog Post</h1> | ||
<p>Lorem ipsum dolor sit amet.</p> | ||
``` | ||
|
||
If you're using build tools, create a Handlebars file at | ||
`templates/components/blog-post.handlebars`. | ||
`app/components/blog-post.hbs`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
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: | ||
<!--- <a class="jsbin-embed" href="http://jsbin.com/tikenoniku/1/edit?output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script> | ||
|
||
The example above uses `<script>` tags to work inside of JSBin.--> | ||
|
||
```handlebars | ||
<h1>My Blog</h1> | ||
{{#each post in model}} | ||
{{blog-post}} | ||
```app/templates/index.hbs | ||
{{#each}} | ||
{{#blog-post title=title}} | ||
{{body}} | ||
{{/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> | ||
```app/templates/components/blog-post.hbs | ||
<article class="blog-post"> | ||
<h1>{{title}}</h1> | ||
<p>{{yield}}</p> | ||
<p>Edit title: {{input type="text" value=title}}</p> | ||
</article> | ||
``` | ||
|
||
```app/routes/index.js | ||
import Ember from 'ember' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have generally been leaving these imports out of the files. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. remove: There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, we need to be consistent across all examples, and after discussing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice will do. |
||
|
||
var posts = [{ | ||
title: "Rails is omakase", | ||
body: "There are lots of à la carte software environments in this world." | ||
}, { | ||
title: "Broken Promises", | ||
body: "James Coglan wrote a lengthy article about Promises in node.js." | ||
}]; | ||
|
||
export default Ember.Route.extend({ | ||
model: function() { | ||
return posts; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. missing spaces There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. thoughts on inling the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Indentation. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure how the indentation should look? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
}); | ||
``` | ||
|
||
```app/components/blog-post.js | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Extra newline |
||
export default Ember.Component.extend({ | ||
|
||
}); | ||
``` | ||
|
||
Each component, under the hood, is backed by an element. By default | ||
Ember will use a `<div>` element to contain your component's template. | ||
|
@@ -55,9 +88,9 @@ 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`. | ||
a file at `app/components/blog-post.js`. If your component was called | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks from the diff that this will end up reading "you would create a a file", but I could be mis-reading the diff. Can you double check? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ooops |
||
`audio-player-controls`, the file name would be at | ||
`app/components/audio-player-controls.js` | ||
|
||
In other words, Ember will look for a class with the camelized name of | ||
the component, followed by `Component`. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,25 +18,28 @@ 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> | ||
```app/templates/components/post-summary.js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be |
||
|
||
<h3 {{action "toggleBody"}}>{{title}}</h3> | ||
{{#if isShowingBody}} | ||
<p>{{{body}}}</p> | ||
{{/if}} | ||
``` | ||
|
||
```js | ||
App.PostSummaryComponent = Ember.Component.extend({ | ||
```app/components/post-summary.js | ||
|
||
import Ember from 'ember'; | ||
|
||
export default 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> | ||
|
||
<!---<a class="jsbin-embed" href="http://jsbin.com/ciwenemedi/1/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. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,4 +29,49 @@ To highlight the power of components, here is a short example of turning a blog | |
application. Keep reading this section for more details on building | ||
components. | ||
|
||
<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> | ||
<!---<a class="jsbin-embed" href="http://jsbin.com/xexumomaru/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script> | ||
|
||
The example above uses `<script>` tags to work inside of JSBin. Ember-cli works by file structure, so there are no `<script>` tags:--> | ||
|
||
```app/templates/index.hbs | ||
|
||
{{#each}} | ||
{{#blog-post title=title}} | ||
{{body}} | ||
{{/blog-post}} | ||
{{/each}} | ||
``` | ||
|
||
```app/templates/components/blog-post.hbs | ||
|
||
<article class="blog-post"> | ||
<h1>{{title}}</h1> | ||
<p>{{yield}}</p> | ||
<p>Edit title: {{input type="text" value=title}}</p> | ||
</article> | ||
``` | ||
|
||
```app/routes/index.js | ||
import Ember from 'ember' | ||
|
||
var posts = [{ | ||
title: "Rails is omakase", | ||
body: "There are lots of à la carte software environments in this world." | ||
}, { | ||
title: "Broken Promises", | ||
body: "James Coglan wrote a lengthy article about Promises in node.js." | ||
}]; | ||
|
||
export default Ember.Route.extend({ | ||
model: function() { | ||
return posts; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ^^ There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please indent this |
||
} | ||
}); | ||
``` | ||
|
||
```app/components/blog-post.js | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Extra newline |
||
export default Ember.Component.extend({ | ||
|
||
}); | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
app/templates/components/blog-post.hbs