发布于 2015-08-18 16:26:35 | 349 次阅读 | 评论: 0 | 来源: 网络整理
默认情况下，组件不能访问模板作用域下的属性。
例如，假设有一个用于显示一篇博客的blog-post组件：
1 2 3 4 |
<script type="text/x-handlebars" id="components/blog-post">
<h1>Component: {{title}}</h1>
<p>Lorem ipsum dolor sit amet.</p>
</script>
|
其中有一个Handlebars表达式{{title}}，用于将title属性的值输出到<h1>里。
现在假设有如下的模板和路由：
1 2 3 4 5 6 7 |
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
title: "Rails is omakase"
};
}
});
|
1 2 3 |
{{! index.handlebars }}
<h1>Template: {{title}}</h1>
{{blog-post}}
|
运行这段代码，第一个<h1>（在外部模板中）显示了title属性，当时第二个<h1>（在组件中）的则是空的。
让title属性在组件中可用，可以修复这个问题。
1 |
{{blog-post title=title}}
|
这使得外部模板作用域下的title属性在组件模板有效，且有相同的名称title。
还是上面的例子，如果模型的title属性的名称为name，那么组件的使用需要修改为：
1 |
{{blog-post title=name}}
|
其实际上，就是采用类似componentProperty=outerProperty的语法，将外部作用域的一个属性通过命名属性绑定到了组件的作用域。
需要注意的是这些属性是绑定的，无论是在模型或组件中修改了其值，这些值都会被自动同步。在下面的例子中，在文本输入框中输入一些文本，无论是在外部模板还是组件内，或是说明中都被同步了。
此外，还可以在{{#each}}循环中来绑定属性。这将为每个条目创建一个组件并将在循环中绑定到每个模型。
1 2 3 |
{{#each}}
{{blog-post title=title}}
{{/each}}
|