¿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 1.0 no puede acceder a elementos dentro del elemento nested <template>
  • Verifica si el elemento Dom es nativo / sin elemento personalizado
  • Shadow DOM: ¿es posible encapsular JS?
  • Transpiling componentes web basados ​​en class con babel
  • Hacer un object fuente HTML
  • Enlazar un valor entre un elemento principal y un elemento secundario donde se crea el elemento secundario utilizando JavaScript
  • Webcomponents v1 - Constructor ilegal
  • React, Unbeught ReferenceError: ReactDOM no está definido
  • El elemento nested (componente web) no puede get su plantilla
  • ¿Cómo puedo compartir un componente angular 2 entre múltiples proyectos de Angular 2?
  • JavaScript dentro de las mejores prácticas de Shadow DOM
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.