Question

在创建自定义Polymer元素之前：

<polymer-element name="my-custom-element" attributes="key" hidden>
  <script>
    Polymer({});
  </script>
</polymer-element>

我想将一个属性传递给我导入的隐藏自定义Polymer元素，当我将它导入到其他自定义Polymer元素上时：

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

我该怎么办？有可能这样做吗？如果不是什么好方法？

Answer 1

正如wirlez指出的那样，您将要导入元素的定义，创建实例，并将键值设置为属性。

例如：

<强>的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <!-- import element definition from jsbin -->
    <link rel="import" href="http://jsbin.com/mojadu.html">
  </head>
  <body>
    <x-foo key="42"></x-foo>
  </body>
</html>

元素定义

<!-- Make sure your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="x-foo" attributes="key" hidden>
  <template>
    <h1>Hello from x-foo</h1>
    <h2>The key is {{key}}</h2>
  </template>
  <script>
    Polymer({
      keyChanged: function(oldVal, newVal) {
        console.log('the key is', newVal);
      }
    });
  </script>
</polymer-element>

Here's the example running in jsbin

如果你在控制台中查看，你会看到该元素正在记录密钥的值。

如果您尝试使用index.html中的JavaScript访问该元素，则可能需要在操作之前等待the polymer-ready event。

例如：

document.addEventListener('polymer-ready', function() {
  var el = document.querySelector('x-foo');
  // do something with x-foo that involves its key
});

Answer 2

要传递自定义属性，您需要一个自定义元素。标签“link”不是自定义元素。创建自己的自定义元素并将其实现到您的网络应用程序read this。

如果您还没有，请按照整个教程进行操作：）

修改导入自定义元素与使用它不同。您可以执行以下操作：导入自定义元素，然后使用特定属性编写标记。

<my-custom-element key="15"></my-custom-element>

就像使用core-ajax一样：

<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"chrome"}' handleAs="json" on-core-response="{{handleResponse}}"></core-ajax>

好像你想要这样：

<link rel="import" href="../core-ajax/my-custom-element.html" auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"chrome"}' handleAs="json" on-core-response="{{handleResponse}}"></link>

很抱歉，这不是Polymer的工作方式！

Answer 3

让我们说这是你的聚合物文件：

<polymer-element name="my-custom-element" attributes="key" hidden>
      <script>
        Polymer({});
      </script>
    </polymer-element>

这是您在html中导入文件的链接：

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

有几种方法可以做你所要求的......

如果您希望动态创建该值，那么最好的方法是为自定义元素创建一个构造函数，如下所示：

<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
          <script>
            Polymer({});
          </script>
        </polymer-element>

然后在聚合物元素的代码上创建这样的元素的实例，如：

var custom =  new MyCustomElement();

将该元素放入DOM中，如：

var dom = document.querySelector('otherElement'); //depending on scope
dom.appendChild(custom);
custom.setAttribute('atribute', value);

or
this.$.elementID.appendChild(custom);
custom.setAttribute('atribute', value);

我希望这有点像你正在寻找的。欢呼声

如何将属性传递给导入的隐藏自定义聚合物元素

3 个答案: