javascript - Ember.js：如何访问嵌套视图实例

Question

假设我正在定义嵌套视图，就像这样（JSFiddle 上的代码示例）：

App.ParentView = Ember.View.extend({
    ChildView: Ember.View.extend({ ... }),
    method: function() {
        this.get('ChildView') // => this is the class, not the instance :(
    }
});​

{{#view App.ParentView}}
    {{#view ChildView}}
        ...
    {{/view}}
{{/view}}

我想避免在父视图和子视图之间绑定很多属性。相反，我想做类似this.getPath('ChildView.foo'). 但this.get('ChildView')返回我使用 Ember.View.extend 创建的类，而不是实例，因此我无法访问属性。

是否有一种规范的方法可以从父视图的方法内部访问子视图的当前实例？

Answer 1

您可以通过视图传递viewName变量并通过父级访问视图。

见http://jsfiddle.net/Tx3NP/5/

{{#view App.ParentView}}
  {{#view childView viewName="childViewInstance"}}
     ...
  {{/view}}
{{/view}}
console.log(this.get('childViewInstance.value'));

或者您可以按照@weltraumpirat 的建议进行操作并访问该this.get('childViews')阵列。

Answer 2

您可以使用_childViews数组：

 console.log( this._childViews[0].get('value') );

或者你可以给你的视图一个 id 并简单地使用 jQuery 来访问相应的 HTML 元素。

{{#view childView id="childView"}}

console.log( Em.$('#childView')[0].value );

Answer 3

其实很简单。

从 2.10.0 开始，如果您在组件内部并且需要查找嵌套组件，只需搜索：

  const id = 'my-specific-id-im-looking-for',
    views = this.get('childViews');

  let count = views.length;

  if (count) {
    while (--count) {
      if (views[count].get('elementId') === id) {
        // this is your view. do stuff with it, call methods on it, whatevs;
        break;
      }
    }    
  }

如果您在此之前，请尝试使用组件的方法forEachChildView