javascript - 使用 Polymer 在元素上设置属性会出现错误 "Cannot set property ' .. .' of undefined'

Question

我正在尝试使用 polymer 设置一个自定义元素，该元素由一个带有图标的可拖动框组成。我希望能够通过指定 icon 来定义图标元素上的属性，以便我可以声明性创建元素而不是定义 setIcon元素上的方法，只能通过 javascript 访问。

我尝试通过包含 properties 将我的元素设置为处理该属性。我正在输入 polymer 的元素原型(prototype)上的属性，给我看起来像这样的元素代码:

var elementProto = {
    is : "my-element",
    behaviors : [someOtherProto],
    properties : {
        icon : {
            "type" : "String",
            "observer" : "_iconObserver",
        }
    },
    _iconObserver : function(){ /* Functionality for adding icon */}
};

elementProto.otherMethods = various functions;

Polymer(elementProto);

在另一个文件中，我尝试使用 setAttribute 设置我的图标属性在另一个 javascript 函数中，(在通过关联的 html 文件导入我的新元素之后)如下所示:

var newElement = document.createElement("my-element");
newElement.setAttribute("icon", "some/icon/path.png");

理想情况下，这会以新路径作为参数来触发我的观察者函数，并且我会将新元素中图像的 URL 设置为该路径的任何值。相反，Chrome 给我这个错误:

Uncaught TypeError: Cannot set property 'icon' of undefined

为什么我会收到此错误，我该如何修复它？

调试注意事项:

我深入研究了 polymer 代码，发现错误源自这一行:

var model = this._clientsReadied ? this : this._config;

两者this._clientsReadied和this._config未定义，这导致 ._setAttributeToProperty(model, name); 中出现此错误方法，其中 name被设置为 model 上的属性。不过，我对 polymer 了解不够，不知道为什么这些属性是未定义的。

Answer 1

Why am I getting this error, and what can I do to fix it?

您收到此错误是因为在调用 createElement() 时，您的自定义元素尚未注册。可能是因为这两个文件的解析顺序错误。

要解决此问题，您可以尝试更改导入文件的顺序，或者等待 HTMLImportsLoaded 或 WebComponentsReady 事件。

document.addEventListener("HTMLImportsLoaded", function () 
{
    var newElement = document.createElement("my-element");
    newElement.setAttribute("icon", "some/icon/path.png");
});