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);

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

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

此外，如果在代码中实例化一个Web组件：

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

问题＃2我可以假设在第二行，＆＃39; bla＆＃39;已经在这里用它的所有方法创建了吗？（有趣的是，这很有效，但我想也许它可以更好地等待某种事件或组件准备就绪的东西）

Answer 1

因为append具有同步（与异步相反）的行为，所以它始终有效。

不要使用不必要的安全网（事件，轮询......）乱丢您的代码库。

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

Answer 2

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

如果您觉得有必要说服自己某个导入方法（咨询外部文件的任何内容）是同步的而不是异步的，您可以在* nix系统上执行以下操作：

为其创建一个命名管道和管道yes。（$ yes >pipe1）
创建一个合适的HTML（或JS或其他）标题，使yes（无限系列的y s后跟换行符）的输出在语法上对您的情况更正。
创建另一个命名管道并管道标头，然后输入第一个命名管道（使用cat）。（$ cat header.htm pipe1 >pipe2.htm）
使用第二个命名管道的名称运行导入方法。（<link rel="import" href="pipe2.htm">或var x = require("pipe2.js")）

你的用户界面是否挂起？如果是这样，那么它是同步的。它会继续吗？然后它是异步的。

Answer 3

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

    <catalog_product_view>
        <reference name="root">
            <remove name="breadcrumbs"/>
        </reference>
    </catalog_product_view>

Answer 4

而不是在html中创建它：

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

您还可以执行以下操作：

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

Answer 5

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

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

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

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

因此，您可以稍后使用JavaScript轻松更新此DOM元素属性：

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

然后在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组件，代码更清晰，请参阅本教程：http://www.revillweb.com/tutorials/web-components-with-es2015-es6/

希望这有帮助！

如何从Javascript初始化Web组件？

5 个答案: