javascript - bubbling - Ember.js: Cómo acceder a instancias de vista anidadas

ember on hover

Question

Digamos que estoy definiendo vistas anidadas, así ( ejemplo de código en 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}}

Me gustaría evitar vincular muchos atributos entre la vista principal y la vista secundaria. Más bien, me gustaría hacer algo como this.getPath(''ChildView.foo'') . Pero this.get(''ChildView'') devuelve la clase que creé con Ember.View.extend, no la instancia, por lo que no puedo acceder a los atributos.

¿Existe una forma canónica de acceder a la instancia actual de una vista secundaria desde un método de la vista principal?

Answer 1

En realidad es bastante simple.

A partir de la versión 2.10.0, si está dentro de un componente y necesita encontrar un componente anidado, simplemente busque en:

  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;
      }
    }    
  }

Si es anterior a esto, intente usar el método del componente para forEachChildView

Answer 2

Puede pasar una vista a la variable viewName y acceder a la vista a través del padre de esa manera.

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

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

O puede hacer lo que recomienda @weltraumpirat y acceder a la matriz this.get(''childViews'') .

Answer 3

Puede utilizar la matriz _childViews :

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

o puede asignar a su vista una identificación y simplemente usar jQuery para acceder al elemento HTML correspondiente.

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

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