¿Cómo inicializar un componente web desde Javascript?

Digamos que tengo el siguiente componente web:

<link rel="import" href="my-dialog.htm"> <my-dialog id='mydialog1' heading="A Dialog">Lorem ipsum</my-dialog> 

Consulte aquí para get más información: http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/

y aquí: http://www.revillweb.com/tutorials/web-component-tutorial/

Sin embargo, aparte de los attributes, a veces me gustaría inicializarlo con algún object que tenga un montón de properties, por ejemplo:

 var obj = { heading: 'hello there', data1: 123, name: 'blabla' }; //^^ this can be any type of data.. think some kind of data model here, and maybe I get this model from the server. 

Así que no puedo enviar el object anterior dentro de mi html a través de los attributes, porque podría tener muchas configuraciones y / o podría getlo más adelante en el server, así que tengo que hacerlo en JavaScript.

Entonces, lo que he estado haciendo es que acabo de tomar el object después de haberlo creado:

 // initialize is a function I have inside my web component $('#mydialog1').get(0).initialize(obj); 

^^ Y esto funciona, inicializar (..) es una function dentro de mi componente web … Pero:

Pregunta n. ° 1 Me pregunto si esta es la forma correcta de inicializar un componente web, ya que parece un poco desorderado.

Además, si se crea una instancia de un componente web en el código:

 $('body').append("<my-dialog id='bla'></my-dialog>"); $('#bla').get(0).initialize(obj); 

Pregunta # 2 ¿Puedo suponer en la segunda línea, que 'bla' ha sido creado aquí con todos sus methods? (Es gracioso, esto funciona, pero pensé que tal vez sería mejor esperar algún tipo de evento o algo que el componente esté listo)

5 Solutions collect form web for “¿Cómo inicializar un componente web desde Javascript?”

Como append tiene un comportamiento sincrónico (opuesto a async), siempre funcionará.

No ensucie su base de código con networkinges de security innecesarias (events, sondeos …).

En resumen, justo después de que se ejecute .append, el elemento está presente en DOM y puede consultarlo con selectores y hacer lo que quiera con él.

Al igual que prácticamente todos los methods de JavaScript, el anexar HTML es sincrónico, lo que significa que puede esperar que se construyan los elementos DOM correctos cuando la function retorna; de lo contrario, la function aceptaría devoluciones de llamada o devolvería un Protable o similar. Por lo tanto, puedes confiar en que la cosa ha sido creada e inicializarla. Y inicializarlo de esta manera es probablemente lo mejor que se puede hacer (aunque podría haber una manera de hacerlo todo en una línea).

Si siente la necesidad de convencerse de que un método de import determinado (cualquier cosa que consulte un file externo) sea sincrónico en vez de asynchronous, puede hacer lo siguiente en un sistema * nix:

  1. Crea una tubería con nombre y canaliza yes a ella. ( $ yes >pipe1 )
  2. Cree un encabezado HTML (o JS o lo que sea) apropiado que haga que la salida de yes (una serie infinita de y seguidas de avances de línea) sea sintácticamente correcta para su situación.
  3. Cree otra tubería con nombre y canalice la cabecera seguida de la primera tubería con nombre (usando cat ). ( $ cat header.htm pipe1 >pipe2.htm )
  4. Ejecute su método de import usando el nombre de la segunda tubería con nombre. ( <link rel="import" href="pipe2.htm"> o var x = require("pipe2.js") )

¿Su interfaz de usuario se cuelga? Si es así, entonces es sincrónico. ¿Sigue funcionando? Entonces es asynchronous.

¿Por qué estás configurando los attributes a través de un object? Haría ajustes y luego los pasaría de esta manera:

 document.getElementById("someID").style.width = widthVar; document.getElementById("someID").name = nameVar; document.getElementById("someID").style.color = colorVar; 

En lugar de crearlo en html:

 $('body').append("<my-dialog id='bla'></my-dialog>"); $('#bla').get(0).initialize(obj); 

También puedes hacer algo como:

 var myDialog = document.createElement('my-dialog'); myDialog.initialize(obj); $('body').append(myDialog); 

Los componentes web están diseñados para interactuar a través de sus attributes, de esta manera pueden permanecer verdaderamente interoperables.

Si obtiene sus datos después de haber agregado el componente al DOM, aún puede interactuar con el componente web a través de attributes como este:

Digamos que ya tiene su componente de dialog agregado al DOM:

 <my-dialog id='mydialog1' heading="A Dialog">Lorem ipsum</my-dialog> 

Por lo tanto, puede actualizar fácilmente estos attributes de elementos DOM en un momento posterior con JavaScript:

 document.querySelector('#mydialog1').setAttribute('init-data', JSON.stringify(obj)); 

Y luego dentro del componente web puede reactjsr a los cambios de attributes de la siguiente manera:

 //Called when one of this components attributes change proto.attributeChangedCallback = function(attrName, oldVal, newVal) { switch (attrName) { case "init-data": //DO SOMETHING WITH newVal var dataObj = JSON.parse(newVal); break; } }; 

Esto debería darte todo lo que necesitas. Recomendaría seriamente escribir sus componentes web con ES2015, el código es mucho más limpio, consulte este tutorial: http://www.revillweb.com/tutorials/web-components-with-es2015-es6/

¡Espero que esto ayude!

  • ¿Polymer fire () publica el evento globalmente?
  • ¿Por qué tenemos que registrar un elemento personalizado?
  • Encapsulación de JavaScript con WebComponents / ShadowDOM
  • RiotJS - ¿Cómo pasar events entre subtags usando el patrón Observable?
  • Cómo incrustar toda la aplicación angularjs en la aplicación existente que se implementa por separado
  • Bandera list de componentes web
  • Componer componentes web nesteds v1
  • Polímero 1.0 observadores de matriz en el cambio de enlace
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.