ember.js - ember - nombre de clase de la plantilla de la aplicación de brasas

ember component

Question

Estoy teniendo un problema similar a este:

Establecer tagName en la plantilla de la aplicación en ember js

Aunque estoy de acuerdo en que recurrir a un complemento de vista heredado no puede ser el camino a seguir, también aquí mi CSS basado en bootstrap está roto por el div que lo incluye (la altura no se establece, para ser precisos).

Ahora, una forma diferente de lograr lo que necesito es establecer la propiedad classNames del div adjunto (si existe), como se puede hacer con un componente:

export default Ember.Component.extend({
classNames: [''container'']
});

Por lo tanto, podría aplicar height:100% , y todo estaría bien.

Actualización: El problema no es el diseño del div encerrado de un componente, sino la forma en que se comporta la plantilla principal de la aplicación. Déjame aclarar:

application.hbs:

{{outlet}}

Ahí se representa la plantilla de una ruta, por ejemplo, map.hbs:

{{#tab-navigation-container}}
{{top-nav}}
{{tab-contentpane model=model}}
{{tab-navigation map=true}}
{{/tab-navigation-container}}

Ahora, components/tab-navigation-container.js transforma el div que lo incluye para incluir la clase CSS del contenedor:

import Ember from ''ember'';
export default Ember.Component.extend({
classNames: [''container'']
});

Sin embargo, el HTML renderizado se ve así:

Entonces, aparentemente application.hbs pone otro div en el componente, y estoy buscando una manera de

• eliminarlo (que solo se puede lograr con un complemento de vista heredado, como se explica en el enlace de arriba) o
• aplicarle un className.

Se puede hacer? ¡Gracias!

Answer 1

Bueno, esto es más un truco feo que una solución real, pero por el momento funciona. Acabo de didInsertElement la manipulación ordinaria de jQuery DOM al sobrescribir el evento didInsertElement del componente:

export default Ember.Component.extend({
setupFunc: function () {
$(''#tab-navigation-container'').unwrap();
}.on(''didInsertElement'')
});

donde tab-navigation-container es la identificación del componente.

Answer 2

Debes establecer tagName y classNames para que sea tu elemento más externo, esto mantendrá un estilo consistente. Por ejemplo, di originalmente que tenías:

<section class="container col-md-6">
<div class="col-sm-12 test">
<p>some content...</p>
...
</div>
</section>

Deberías crear tu componente así:

export default Ember.Component.extend({
tagName: ''section'',
classNames: [''container'', ''col-md-6'']
});

Entonces su plantilla puede excluir la envoltura de la sección externa

<div class="col-sm-12 test">
<p>some content...</p>
...
</div>

Realmente no hay ninguna razón por la que su CSS se debe romper mediante el uso de componentes. Puede establecer todas las mismas clases y etiquetas que estaba utilizando antes y CSS debería mostrar lo mismo.

Avíseme si malinterpreté su pregunta.

Answer 3

En Ember 2.7 y siguientes, puede controlar la etiqueta de nivel superior (incluso sin representarla) y sus clases de CSS modificando su aplicación Ember de la siguiente manera:

// app/app.js
App = Ember.Application.extend({
ApplicationView: Ember.Component.extend({
classNames: [''my-custom-classname''],
// Or to omit the tag entirely:
tagName: '''',
}),
// ...
});

Como se ve en esta discusión .

Esto no requiere ningún hack o plugin heredado.