By default a component does not have access to properties in the template scope in which it is used.
For example, imagine you have a blog-post
component that is used to
display a blog post:
You can see that it has a {{title}}
Handlebars expression to print the
value of the title
property inside the <h1>
.
Now imagine we have the following template and route:
export default Ember.Route.extend({
model: function() {
return {
title: "Rails is omakase"
};
}
});
Running this code, you will see that the first <h1>
(from the outer
template) displays the title
property, but the second <h1>
(from
inside the component) is empty.
We can fix this by making the title
property available to the
component:
This will make the title
property in the outer template scope
available inside the component's template using the same name, title
.
If, in the above example, the model's title
property was instead
called name
, we would change the component usage to:
In other words, you are binding a named property from the outer scope to
a named property in the component scope, with the syntax
componentProperty=outerProperty
.
It is important to note that the value of these properties is bound. Whether you change the value on the model or inside the component, the values stay in sync. In the following example, type some text in the text field either in the outer template or inside the component and note how they stay in sync.
You can also bind properties from inside an {{#each}}
loop. This will
create a component for each item and bind it to each model in the loop.