javascript - 如何从 Javascript 初始化 Web 组件？

Question

假设我有以下网络组件:

<link rel="import" href="my-dialog.htm">

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

查看此处了解更多信息:http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/

这里:http://www.revillweb.com/tutorials/web-component-tutorial/

但是，除了属性之外，有时我想用一些具有一堆属性的对象来初始化它，例如:

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.

所以我无法通过属性在我的 html 中发送上述对象，因为我可能有很多设置和/或我可能稍后从服务器获取它，所以我需要在 javascript 中完成。

所以我一直在做的是在创建对象之后才获取该对象:

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

^^ 这有效，initialize(..) 是我的网络组件中的一个函数。但是:

问题 #1 我想知道这是否是初始化 Web 组件的正确方法，因为它看起来有点乱。

此外，如果在代码中实例化一个网络组件:

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

问题 #2 我可以假设在第二行，'bla' 已经用它的所有方法在这里创建了吗？(很有趣，这可行，但我认为也许最好是等待某种事件或组件准备就绪的事情)

Answer 1

因为 append 具有同步(与异步相反)行为，所以它将始终有效。

不要用不必要的安全网(事件、轮询......)乱丢你的代码库。

简而言之，在执行 .append 之后，元素立即出现在 DOM 上，您可以使用选择器查询它并用它做任何您想做的事情。