如何从Javascript初始化Web组件？

假设我有以下web组件：

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

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

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

因此，我一直在做的是，我只是在创建对象之后获取它：

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

^^这是可行的，初始化（..）是我的web组件中的一个函数。。但是：

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

此外，如果在代码中实例化web组件：

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

$（'body'）。追加（“”）；
$（'#bla'）.get（0）.初始化（obj）；

---

问题#2在第二行，我可以假设“bla”已经在这里创建了所有的方法吗？（很有趣，这是可行的，但我认为最好等待某种事件或组件准备好的东西）

为什么要通过对象设置属性？我会进行设置，然后通过以下方式传递：

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

---

因为append有一个同步（与异步相反）行为，所以它总是可以工作的

不要用不必要的安全网（事件、轮询…）丢弃代码库

---

简而言之，在.append执行之后，元素就出现在DOM上，您可以使用选择器查询它，并对其执行任何操作。

与几乎所有JavaScript方法一样，HTML追加是同步的，这意味着您可以期望在函数返回时构造正确的DOM元素-如果不是这样，函数将接受回调或返回承诺或类似内容。因此，您可以相信该对象已经创建并初始化它。以这种方式初始化它可能是最好的方法（尽管可能有一种方法可以在一行中完成这一切）

如果您觉得有必要让自己相信给定的导入方法（任何引用外部文件的方法）是同步的而不是异步的，那么您可以在*nix系统上执行以下操作：

创建一个命名管道，并将管道

yes

添加到其中。（

$yes>pipe1

）

创建一个适当的HTML（或JS或其他）标题，使

yes

（后面是换行符的无限系列

y

s）的输出符合您的情况

创建另一个命名管道，并将标题和第一个命名管道（使用

cat

）连接到该标题。（

$cat header.htm pipe1>pipe2.htm

）

使用第二个命名管道的名称运行导入方法。（

或

var x=require（“pipe2.js”）

）

---

你的UI挂起了吗？如果是，那么它是同步的。它还在继续吗？然后它是异步的。

而不是在html中创建它：

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

---

Web组件设计为通过其属性进行交互，这样它们就可以保持真正的互操作性

如果在将组件添加到DOM后获得数据，您仍然可以通过如下属性与web组件交互：

假设您已经将对话组件添加到DOM中：

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

然后在web组件中，您可以对属性更改做出如下反应：

//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;
        }
    };

这会给你所需要的一切。我郑重建议您使用ES2015编写web组件。代码要干净得多，请参阅本教程：

---

希望这有帮助

这是什么技术？我们可以参考哪一页来了解更多信息？你有什么问题没有被那个页面回答？这是web组件吗？那好吧。您是否在询问如何将数据可靠地绑定到Web组件，而不必在实例化之前承担这样做的风险？是的。如果我通过代码正确地传递数据，或者如果有更好的方法，你不会在“created”回调中这样做吗？或者可能是“附加”回调？我不一定是在谈论样式设置。。它可以是“设置”对象中传递的任何内容。任何类型的数据。他说的是web组件，这是一种正在开发的将数据绑定到本机HTML的方法。@foreyez-您可以使用上述方法创建任何属性。我将创建一个脚本，然后使用键和值链接obj键，从而在元素上相应地设置它们。

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

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

//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;
        }
    };