Question

我正在尝试使用聚合物设置自定义元素，聚合物包含一个带有图标的可拖动框。我希望能够通过在元素上指定icon属性来定义图标，这样我就可以声明创建元素而不是在元素上定义setIcon方法，这只能被访问通过javascript。

我试图设置我的元素来处理属性，方法是在元素原型上包含properties属性，我正在加入聚合物，给我一些看起来像这样的元素代码：

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

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

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

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

Uncaught TypeError: Cannot set property 'icon' of undefined

为什么我会收到此错误，我该怎么做才能修复它？

有关调试的说明：

我已经深入研究了聚合物代码，发现错误来自这一行：

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

this._clientsReadied和this._config都未定义，这导致._setAttributeToProperty(model, name);方法出现此错误，其中name被设置为model上的属性。我对聚合物知之甚少，不知道为什么这些属性不明确。

Answer 1

为什么我会收到此错误，我该怎么做才能修复它？

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

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

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

在元素上设置属性会给Polymer带来错误“无法设置属性'......'未定义'

1 个答案: