Question

如果我有一个名为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}}的正常绑定方法不是一个可行的例子

Answer 1

在不知道具体用例的情况下，很难知道以下答案是否适合您，但有一件事是肯定的 - 它非常符合Ember 2.0“数据向下，行动起来”的理念（参见{ {3}} 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>

查看工作示例this

（理论上，你可以使用观察者而不仅仅是didInsertElement内部来做这件事，但我还没有测试过。）

Answer 2

您可以使用_view.parentView访问组件内foo属性的值。（因为_view中有一个下划线，对我来说这意味着它不是公共API，因此它们可能会在将来摆脱它 - 但它现在已经存在:)）

如下所示：

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

工作演示here

访问模板块中的组件范围

2 个答案: