ember.js - resueltos - ¿Cómo agrego programáticamente vistas secundarias a una vista de color ámbar en selectores de DOM específicos?

vistas auxiliares

Question

Tengo una vista que usa una biblioteca de terceros para representar elementos DOM adicionales en el enlace didInsertElement. Después de agregar estos nuevos elementos, necesito agregar algunas vistas secundarias dentro de ellos, para que puedan representar datos dinámicos.

Esto es lo que intenté:

App.MyView = Ember.View.extend({
  didInsertElement: function() {
    create3rdPartyDomElements();
    var element = this.$(''someSelector'');
    childView = this.createChildView(App.SomeViewClass, attributesDict);
    childView.appendTo(element);
  }
});

(jsbin: http://jsbin.com/idoyic/3 )

Esto representa mis vistas como se esperaba, pero da el siguiente error de aserción con Ember RC 7: "No se puede agregar a un Ember.View existente. Considere usar Ember.ContainerView en su lugar".

He intentado extender ContainerView, como se aconseja aquí y que funciona, pero no tengo forma de insertar las vistas secundarias en selectores DOM específicos. Simplemente inserta las vistas secundarias al comienzo de la vista principal.

¿Puede alguien ayudarme? ¡Muchas gracias!

Answer 1

Así es como creé:

Una implementación donde tienes la vista principal, en ese caso codemirror, en el medio. Y es posible agregar más vistas, en la parte superior o inferior.

App.EditorView = Ember.View.extend({
  templateName: ''editor-view'',
  topView: Ember.ContainerView.extend(),
  bottomView: Ember.ContainerView.extend(),
  CodeMirrorView: Ember.TextArea.extend({  
    didInsertElement: function() {      
      this.codeMirror = CodeMirror.fromTextArea(this.get(''element''));                  
    }
  })
});

La plantilla:

<script type="text/x-handlebars" data-template-name="editor-view">
  {{view view.topView viewName="topViewInstance"}}
  {{view view.CodeMirrorView}}
  {{view view.bottomView viewName="bottomViewInstance"}}
</script>

Una vista para representar un componente personalizado:

App.MyComponent = Ember.View.extend({
  templateName: ''click-here'',
  message: null,
  click: function() {
    alert(this.get(''message''));
  }
});

La implementación:

App.MyEditorView = App.EditorView.extend({  
  didInsertElement: function() {
    this._super();
    this.get(''topViewInstance'').pushObject(App.MyComponent.create({ message: "Hello" }));

    this.get(''bottomViewInstance'').pushObject(App.MyComponent.create({ message: "World" }));
  }
});

Con esto, es posible crear una nueva instancia o extender App.EditorView e insertar más vistas en la parte superior o inferior. Debido a que topView y bottomView son Ember.ContainerView , todas las vistas agregadas tendrán los enlaces, eventos y otras características.

Eche un vistazo en ese jsbin para verlo funcionando http://jsbin.com/ucanam/686/edit

Answer 2

Puede renderizar las vistas secundarias en el div oculto de la vista principal, y luego separarlas y didInsertElement elementos DOM arbitrarios en el gancho didInsertElement .

http://jsbin.com/qaqome/1/

Para el tema relacionado (componentes en lugar de vistas) vea también esta pregunta .

Answer 3

intente agregar una propiedad en su vista, algo como esto:

App.MyView = Ember.View.extend({
  childViewsContainer: Em.ContainerView.create({}),
  didInsertElement: function() {
    create3rdPartyDomElements();
    var element = this.$(''someSelector'');
    childViewsContainer.createChildView(App.SomeViewClass, attributesDict);
    childView.appendTo(element);
  }
});

luego, puede acceder a su childViewsContainer y hacer lo que quiera con él