英文原文：http://emberjs.com/guides/components/passing-properties-to-a-component/

    默认情况下，组件不能访问模板作用域下的属性。

    例如，假设有一个用于显示一篇博客的blog-post组件：

    1. <script type="text/x-handlebars" id="components/blog-post">
    2.   <h1>Component: {{title}}</h1>
    3.   <p>Lorem ipsum dolor sit amet.</p>
    4. </script>

    其中有一个Handlebars表达式{{title}}，用于将title属性的值输出到<h1>里。

    现在假设有如下的模板和路由：

    1. App.IndexRoute = Ember.Route.extend({
    2.   model: function() {
    3.     return {
    4.       title: "Rails is omakase"
    5.     };
    6.   }
    7. });
    1. {{! index.handlebars }}
    2. <h1>Template: {{title}}</h1>
    3. {{blog-post}}

    运行这段代码，第一个<h1>（在外部模板中）显示了title属性，当时第二个<h1>（在组件中）的则是空的。

    JS Bin

    让title属性在组件中可用，可以修复这个问题。

    1. {{blog-post title=title}}

    这使得外部模板作用域下的title属性在组件模板有效，且有相同的名称title。

    JS Bin

    还是上面的例子，如果模型的title属性的名称为name，那么组件的使用需要修改为：

    1. {{blog-post title=name}}

    JS Bin

    其实际上，就是采用类似componentProperty=outerProperty的语法，将外部作用域的一个属性通过命名属性绑定到了组件的作用域。

    需要注意的是这些属性是绑定的，无论是在模型或组件中修改了其值，这些值都会被自动同步。在下面的例子中，在文本输入框中输入一些文本，无论是在外部模板还是组件内，或是说明中都被同步了。

    JS Bin

    此外，还可以在{{#each}}循环中来绑定属性。这将为每个条目创建一个组件并将在循环中绑定到每个模型。

    1. {{#each}}
    2.   {{blog-post title=title}}
    3. {{/each}}

    JS Bin