Ember.js 访问模板块内的组件范围

如果我有一个名为

my scope

的组件，该组件仅定义为：

export default Ember.Component.extend({
    foo: 'bar'
})

然后我在模板中使用组件，如下所示：

{{#my-scope}}
    {{foo}}
{{/my-scope}}

如何到达周围块组件的范围？我试过：

• {{foo}}

• {{component.foo}}

• {{view.foo}}

也许这是我需要使用视图的情况？希望不是，但也许是这样

注意：我的用例要复杂得多，但让我们只说组件的正常绑定方法

{{{{my scope foo=outsideFoo}}。。。{{/my scope}}

不是一个可行的例子

---

在不了解您的具体用例的情况下，很难知道以下答案是否适用于您，但有一点是肯定的——它非常符合Ember 2.0“数据下降，动作上升”的理念（请参阅Sam Selikoff的精彩文章）

您可以创建一个组件，该组件向上发送一个操作，其中包含您希望在周围环境中可用的数据，如下所示：

App.XTestComponent = Ember.Component.extend({
  foo: 'bar',

  didInsertElement: function(){
    this.sendAction('action', this.get('foo'));
  }
});

然后，在您周围的上下文（控制器）中，您可以捕获操作并设置适当的数据：

App.ApplicationController = Ember.Controller.extend({
  foo: 'controller',
  actions: {
    setFoo: function(param){
      this.set('foo', param);
    }
  }
});

现在，您可以按照示例中显示的方式在周围上下文中使用

foo

变量：

<script type="text/x-handlebars">
  {{#x-test action='setFoo'}} Hmm {{ foo }} {{/x-test}}
</script>

<script type="text/x-handlebars" id='components/x-test'>
  <h2>Testing</h2>
  {{ yield }}
</script>

{{{x-test action='setFoo'}}Hmm{{foo}}{{/x-test}}
测试
{{yield}}

参见一个工作示例

---

（理论上，您可以使用观察者来执行此操作，而不仅仅是从内部

didInsertElement

，但我还没有对其进行测试。）

您可以使用

\u view.parentView

访问组件内

foo

属性的值。（因为在

\u视图

中有一个下划线，对我来说这意味着它不是公共API，所以他们将来可能会将其删除，但现在它已经存在了：））

如下所示：

{{#x-test}} Inside c1: {{ _view.parentView.foo.name }} {{/x-test}}

---

工作演示

块格式专门将您从组件范围中拖到父范围中，由于隔离级别，从父范围到组件没有任何可用链接。唯一的方法是让组件向父级注册（给父级一个引用组件的机会），然后使用父级的引用向foo展示一些神奇的方式。谢谢@Kingpin2k，我担心可能会涉及到魔法、间接和黑客。我假设如果我使用一个视图，它会工作，对吗？{{view.foo}}看起来它会在一个视图中工作……我真的很惊讶，它会将您转移到范围之外，除了视图留在范围内。。。这不就是为什么吗？好吧，我很感兴趣，但我尝试了这个修改版的JSBIN，它似乎没有为块提供本地化的作用域：。。。我想我还没有完全理解这种方法。你的意思是因为它总是从组件中显示

foo

的值？这是因为，一旦控制器中的

foo

属性重置，它就会成为所有地方的新值。你是说你想让

foo

成为块内的一件事，块外的另一件事？不确定这种方法是否可行是的，我想要“块范围”，根据这种方法，“块范围”在组件中被触发，但最终它是通过在调用组件的控制器上设置属性来实现的。。。如果这个答案不起作用，我希望我的另一个答案对你有用