Ember.js:如何访问嵌套视图实例

Ember.js: How to access nested view instances

本文关键字：访问 嵌套 视图 实例 js 何访问 Ember      更新时间：2023-09-26

假设我正在定义嵌套视图，如下所示（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 创建的类，而不是实例，因此我无法访问这些属性。

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

您可以将视图传递给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')数组。

您可以使用

_childViews数组：

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

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

{{#view childView id="childView"}}
console.log( Em.$('#childView')[0].value );

这其实很简单。

从 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

相关文章：